移动检测/重定向与用户决策通过jQuery UI对话框
Mobile Detection / Redirection with user decision via jQuery UI Dialog
我正在尝试使用Sebastiano Armeli-Battana编写的JS重定向移动库。
默认情况下，如果检测到用户正在使用移动设备，它会自动将用户重定向到移动站点，这是我不喜欢的做法。
我想让用户有机会同意重定向。值得庆幸的是，塞巴斯蒂亚诺包含一个beforeredirection_callback，我想用它来为用户提供对话框中的选择。由于有问题的网站在jQuery UI上投入了大量资金，因此我正在尝试使用jQuery UI对话框。jQuery 对话框没有返回值，但可以执行回调。
我认为问题更多地与可变范围有关，而不是其他任何事情。任何人都可以看到问题的解决方案吗？如何将参数值返回给父回调？
事件.js：
// declare namespace if not already defined
var RP = window.RP || {};
RP.events = {
DetectedSiteSelection: "RP.Detect.onDetectedSiteSelection"
};
检测.js：
// declare namespace if not already defined
var RP = window.RP || {};
// route-manager.js
(function ($, undefined) {
var init = function () {
var mobileSelectorDialog = $('<div></div>')
.html("<p>We have detected that you are browsing our website using a mobile device.</p><p>Click 'Yes' to use our mobile site, or click 'No' to stay on the desktop site.</p>")
.dialog({
title: 'Do you want to use our mobile site?',
bgiframe: true,
autoOpen: false,
minHeight: 200,
width: 350,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes': function() {
$(this).dialog('close');
$(document).trigger(RP.events.DetectedSiteSelection, true);
},
'No': function() {
$(this).dialog('close');
$(document).trigger(RP.events.DetectedSiteSelection, false);
}
}
});
SA.redirection_mobile ({
mobile_url : "http://example.com/mobile/",
noredirection_param:"noredirection",
cookie_hours : "2",
beforeredirection_callback : (function() {
// open dialog
mobileSelectorDialog.dialog('open');
// this needs to return true or false to beforeredirection_callback
// but it doesn't work (scope issue??)
$(document).on(RP.events.DetectedSiteSelection, function (evt, args) {
return args;
});
// return true or false for this to work
})
});
};
RP.Detect = {
Init: init
};
return true;
})(jQuery);
在页面中：
// Mobile browser detection
RP.Detect.Init();
忘记所有废话，只需在左上角附近放置一个按钮，以便用户可以自行选择移动或完整站点。"移动"检测充其量是片状的，因为大量具有各种屏幕分辨率的设备涌入市场。
一个简单的按钮可以避免所有这些，并赋予用户权力。
或者，您可以使用基于屏幕尺寸的简单脚本（这可能与任何其他方法一样可靠），但仍提供完整站点的选项。
JavaScript 执行早在处理事件处理程序之前就已经经过beforeredirection_callback了。我决定编写自己的插件：
/**
* MOBILE.DETECT
* Offers the user a chance to be redirected to a mobile site alternative.
* Optionally remember that choice.
*
* requires PERSIST.js, jQueryUI Dialog, and http://detectmobilebrowsers.com/
*
**/
// declare namespace if not already defined
var MOBILE = window.MOBILE || {};
// events.js
MOBILE.events = {
DetectedSiteSelection: "MOBILE.Detect.onDetectedSiteSelection"
};
// mobile-detection.js
(function ($, undefined) {
var options = {
key: "redirection",
mobileUrl: "http://mobile.site.com/"
};
// Constants
State = {
REDIRECT: "REDIRECT",
NOREDIRECT: "NOREDIRECT",
RESET: "RESET"
};
// vars
var store; // Persist.JS
// handles the triggered callback
var handleCallback = function (evt, args) {
// (re)store result
setStore(args);
// redirect if preference is to redirect
if (args === State.REDIRECT) {
document.location.href = options.mobileUrl;
}
};
// store the preference
var setStore = function(val) {
store.set(options.key, val); // setting preference
};
// get the preference
var getStore = function() {
return State[store.get(options.key)];
};
// gets a query string value
var getQueryValue = function (param) {
if (!param) {
return;
}
var querystring = document.location.search,
queryStringArray = querystring && querystring.substring(1).split("&"),
i = 0,
length = queryStringArray.length;
for (; i < length; i++) {
var token = queryStringArray[i],
firstPart = token && token.substring(0, token.indexOf("="));
if (firstPart === param) {
return token.substring(token.indexOf("=") + 1, token.length);
}
}
};
// gets the query string (key) value
var checkQuery = function () {
return State[getQueryValue(options.key)];
};
// inits this instance
var init = function (_options) {
// extend basic options
$.extend(options, _options);
// initialise store
store = new Persist.Store('MobilePrefs');
// handle event
$(document).on(MOBILE.events.DetectedSiteSelection, handleCallback);
// check query
var query = checkQuery(); // 'true', 'false', undefined
if (query === State.RESET) {
store.remove(options.key); // remove this key entirely
} else if (query != undefined) {
$(document).trigger(MOBILE.events.DetectedSiteSelection, query); // set redirection preference
}
// is mobile browser?
if ($.browser.mobile) {
// check previous value
var state = getStore();
if (state === undefined) {
// define dialog
var mobileSelectorDialog = $('<div></div>')
.html("<p>We have detected that you are browsing our website using a mobile device.</p><p>Click 'Yes' to use our mobile site, or click 'No' to stay on the desktop site.</p>")
.dialog({
title: 'Do you want to use our mobile website?',
bgiframe: true,
autoOpen: false,
minHeight: 200,
width: 350,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes': function() {
$(this).dialog('close');
$(document).trigger(MOBILE.events.DetectedSiteSelection, State.REDIRECT);
},
'No': function() {
$(this).dialog('close');
$(document).trigger(MOBILE.events.DetectedSiteSelection, State.NOREDIRECT);
}
}
});
// open dialog
mobileSelectorDialog.dialog('open');
} else if (state === State.REDIRECT) {
$(document).trigger(MOBILE.events.DetectedSiteSelection, State.REDIRECT); // trigger event
}
}
};
// definition
MOBILE.Detect = {
Init: init
};
})(jQuery);
/**
* jQuery.browser.mobile (http://detectmobilebrowser.com/)
*
* jQuery.browser.mobile will be true if the browser is a mobile device
*
**/
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada'/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)'/|plucker|pocket|psp|symbian|treo|up'.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s'-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|'-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw'-(n|u)|c55'/|capi|ccwa|cdm'-|cell|chtm|cldc|cmd'-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc'-s|devi|dica|dmob|do(c|p)o|ds(12|'-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly('-|_)|g1 u|g560|gene|gf'-5|g'-mo|go('.w|od)|gr(ad|un)|haie|hcit|hd'-(m|p|t)|hei'-|hi(pt|ta)|hp( i|ip)|hs'-c|ht(c('-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i'-(20|go|ma)|i230|iac( |'-|'/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |'/)|klon|kpt |kwc'-|kyo(c|k)|le(no|xi)|lg( g|'/(k|l|u)|50|54|e'-|e'/|'-[a-w])|libw|lynx|m1'-w|m3ga|m50'/|ma(te|ui|xo)|mc(01|21|ca)|m'-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t('-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)'-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|'-([1-8]|c))|phil|pire|pl(ay|uc)|pn'-2|po(ck|rt|se)|prox|psio|pt'-g|qa'-a|qc(07|12|21|32|60|'-[2-7]|i'-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55'/|sa(ge|ma|mm|ms|ny|va)|sc(01|h'-|oo|p'-)|sdk'/|se(c('-|0|1)|47|mc|nd|ri)|sgh'-|shar|sie('-|m)|sk'-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h'-|v'-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl'-|tdg'-|tel(i|m)|tim'-|t'-mo|to(pl|sh)|ts(70|m'-|m3|m5)|tx'-9|up('.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|'-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c('-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda('-|2|g)|yas'-|your|zeto|zte'-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
相关文章：
- jQuery UI自动完成突然停止工作
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- Jquery UI自动完成无法工作
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 使用Jquery ui时滑块无法工作
- JQuery UI可拖动潜水与滚动棒到鼠标
- jQuery UI自动完成-修改问题
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- 阻止选项卡缓存jquery ui
- 将jQuery UI Timepicker Addon与React一起使用
- 如何在页面重新加载时显示jquery ui对话框
- jquery ui自动完成导致标头错误
- jquery UI draggable:UI.children不是一个函数
- 在JQuery UI Accordion Sortable中使用touchpunch无法正确使用touch
- Jquery UI对话框不会消失
- jQuery UI对话框错误，按钮导致HierarchyRequestError
- jQuery UI使用json文件自动完成
- 如何从内部销毁jQuery UI小部件's原型
