SwipeClouds JQuery Mobile 框架，用于 PhoneGap & Cordova 移动应用
5.00/5 (9投票s)
SwipeClouds HTML5 Canvas 框架，适用于 JQuery Mobile、PhoneGap & Cordova
摘要
要查看Swipe Clouds的实际演示，请点击此处。Swipe Clouds for PhoneGap & Cordova。
要观看演示 SwipeClouds 在无人机移动应用中功能的视频，请点击此处：点击此处
为了给我的 JQuery Mobile 应用创建一个人们可能喜欢的界面，我决定尝试使用 html5 Tag Canvas。对于这个项目，我以 Graham Breach 的 JQuery 插件 TagCanvas 为起点，这是我找到的最好的 Tag Canvas 示例。但是，在 PhoneGap 构建中，在手机上滑动时需要进行一些调整以消除卡顿的移动，但我最终让一切都运行得很顺利。我想在这里分享它。本文中的 SwipeClouds Framework for JQuery Mobile 是为 Jquery Mobile 设计的。我最近为 Angular 2 重新设计了整个框架，您可以在以下位置找到源代码和此框架的更新版本：
我在 CodeProject 上的 Angular 2 SwipeClouds Framework 文章在这里：
https://codeproject.org.cn/Articles/1175045/Angular-Mobile-App-with-JQuery-Mobile-Cordova-or-P
引言
由于在移动应用中，用户通过滑动云朵来移动它们，我认为 Swipe Clouds 这个名字很形象也很贴切。在让 Swipe Clouds 在移动浏览器中正常工作时，需要考虑一些基本问题，例如在必要时调整云朵的大小。我们可以立即看到，我们需要做一些事情来动态地自动调整此画布的大小。我遇到的唯一额外问题是，如果您有一个固定的页脚，您可能希望在横屏视图中稍微调整屏幕大小。当然，在 JQuery Mobile 应用中有许多方法可以做到这一点。
我发现，在 JQuery Mobile 应用中处理从纵屏到横屏的屏幕方向更改的最佳方法是使用以下方法：
$(window).bind('orientationchange', function(e){
var orientation="portrait";
if(window.orientation == -90 || window.orientation == 90)
orientation = "landscape";
switch(orientation){ case 'portrait':
//$.mobile.fixedToolbars.setTouchToggleEnabled(true);
break;
case 'landscape':
//$.mobile.fixedToolbars.setTouchToggleEnabled(false); break; default:
break;
};
});
移动云朵选项，如形状和锁定
这些云朵有很多选项参数，如形状和锁定，我们可以随时动态更改。 “锁定”参数可防止云朵在指定的方向上移动。例如，如果我们设置 lock='x'，则可以防止云朵在 x 方向上移动。要更改任何选项，只需使用数组方法将所有相关选项传递给 “tagcanvas” 函数：
function changeshape(s) {
$('#wrapper').panel("close");
var locks = {hcylinder: 'x', vcylinder: 'y', hring: 'x', vring: 'y', sphere: ''};
lock = locks[s] || '';
TagCanvas.initial = (lock == 'x' && [0,0.2]) || (lock == 'y' && [0.2,0]) || [0.2,0.2];
cloudShape = s;
// Simply in pass the options to change!
TagCanvas.Start('tagcanvas', cloudID, {
<span class="emphasis">shape: s,
lock: lock
}); </span>
}
我创建了一个名为 loadCloud 的函数，用于对现有的 Swipe Cloud 进行更改。该函数如下所示：
function loadCloud(zCloud, zShape, zZoom) {
try {
cloudID = zCloud;
cloudShape = zShape;
cloudZoom = zZoom;
TagCanvas.shape = cloudShape;
TagCanvas.zoom = cloudZoom;
TagCanvas.shape = cloudShape;
TagCanvas.zoom = cloudZoom;
TagCanvas.weightMode = 'both';
TagCanvas.weightFrom = 'data-weight';
var gradient = {
0: '#f00', // red
0.33: '#ff0', // yellow
0.66: '#0f0', // green
1: '#00f' // blue
};
TagCanvas.weightGradient = gradient; TagCanvas.weight = false;
if(cloudID == 'wordCloud') { TagCanvas.weight = true; }
var selectedColor = '#000';
document.getElementById('tagcanvas').style.backgroundImage = 'none';
document.getElementById('tagcanvas').style.backgroundRepeat='no-repeat';
document.getElementById('tagcanvas').style.backgroundColor = '#000';
$('#mainPage').css('background', '#000');
oopts = {
textFont: 'Impact,Arial Black,sans-serif',
textColour: '#fff',
textHeight: 20,
minBrightness: 0.2,
maxSpeed: 0.07,
decel: 0.9,
depth: 0.99,
outlineColour: '#ff0000',
outlineThickness: 2,
pulsateTo: 0.6,
pulsateTime: 0.5,
wheelZoom: true,
zoomMin: 0.3,
zoomMax: 3,
zoomStep: 0.05,
frontSelect: true,
lock: null,
tooltip: 'div',
tooltipDelay: 100,
tooltipClass: 'sc_menu_tooltip',
radiusX: 1,
radiusY: 1,
radiusZ: 1,
stretchX: 1,
stretchY: 1,
offsetX: 0,
offsetY: 0,
shuffleTags: false,
noSelect: false,
noMouse: false,
imageScale: 1,
paused: false,
dragControl: true,
dragThreshold: 4,
initial: [0.1,-0.1],
reverse: true,
hideTags: false,
shadow: '#ccf',
shadowBlur: 3,
weight: false,
outlineMethod: "outline"
};
$('#tagcanvas').tagcanvas(oopts, cloudID);
var amt = parseFloat(cloudZoom * 100);
$("#zoomslider").slider().val(amt.toFixed(0));
var i, et = document.getElementById(cloudID).childNodes; for(i in et) {
et[i].nodeName == 'A' && et[i].addEventListener('click', function(e) {
e.preventDefault();
var targetUrl = $(this).attr("role");
if(cloudID != 'pumpkinCloud') {
$("#datatest").html(targetUrl);
$('#inlinecontent').simpledialog2( {'hide': {effect: 'fadeOut',
duration: 5000} } );
} else {
var ximage = 'img_pumpkins/' + targetUrl + '.png';
$('#popupPumpkin img').attr('src', ximage);
$('#popupPumpkin').popup("open");
}
});
}
screenAdjust();
} catch(e) {
document.getElementsByTagName('canvas')[0].style.border='0';
}
}
滑动面板用于用户控件 - 如何创建 iOS7 毛玻璃面板外观
我想为用户提供一种访问控件以操作 Swipe Clouds 属性的方式，我决定使用一个滑动面板来容纳用于更改 Clouds 属性的用户控件。面板代码如下所示。要创建 iOS7 毛玻璃面板外观，我使用了 3 个“技巧”，即：将面板 z-index 设置为 -1。防止控件模糊将面板背景设置为透明模糊面板下方的区域为了模糊或柔化滑动面板下方的区域，我使用了两个类，即 backfrost_on 和 backfrost_off，它们被添加到 scroller_player（容纳屏幕内容的 div 标签）并从中移除。
$("#panel_controls").on("panelbeforeopen", function (event, ui) {
$('#scroller_player').removeClass('backfrost_off');
$('#scroller_player').addClass('backfrost_on');
});
$("#panel_controls").on("panelbeforeclose", function (event, ui) {
$('#scroller_player').removeClass('backfrost_on');
$('#scroller_player').addClass('backfrost_off');
});
.frosted::after {
/* z-index:-1 Only blurs background, NOT controls on panel */
z-index: -1 !important;
position: absolute;
content: "";
right: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
-webkit-filter:blur(8px) brightness(110%);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
-o-filter: blur(8px);
filter: blur(8px);
}
.backfrost_on {
-webkit-filter:blur(2px) brightness(110%);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
.backfrost_off {
}
我决定让面板从右侧滑出，并且能够上下滑动，以便我可以添加任意数量的用户控件。为了使控件面板在我们需要很多控件或处于横屏视图的情况下垂直滑动，我添加了 iscroll.js 以确保平滑滚动，如下所示：
var myScroll;
function loaded() {
myScroll = new iScroll('scroller', { scrollbarClass: 'myScrollbar', hScrollbar:
false, vScrollbar: true });
}
document.addEventListener('DOMContentLoaded', loaded, false);
更改云朵形状和大小的函数如下：
$(document).delegate('.ui-panel ul li > a', 'click', function(
var zid = $(this).data("id");
if(zid == "close") { $('#wrapper').panel("close"); }
else { changeshape(zid); }
});
function changeshape(s) {
$('#wrapper').panel("close");
var locks = {hcylinder: 'x', vcylinder: 'y', hring: 'x', vring: 'y', sphere: ''};
lock = locks[s] || '';
TagCanvas.initial = (lock == 'x' && [0,0.2]) || (lock == 'y' && [0.2,0]) || [0.2,0.2];
cloudShape = s;
TagCanvas.Start('tagcanvas',cloudID, { shape: s, lock: lock });
}
$( "#zoomslider").on('slidestop', function( event ) {
var slider_value=$("#zoomslider").slider().val()/100;
loadCloud(cloudID, cloudShape, slider_value);
});
Swipe Clouds 中的点击事件
由于用户正在滑动云朵，用户很可能会意外点击图片。为了处理对 Swipe Clouds 中图片或文字的意外点击，我决定弹出一个消息，询问用户是否要转到链接。我使用了以下方法来处理这些点击：
var i, et = document.getElementById(ttags).childNodes;
for(i in et) {
et[i].nodeName == 'A' && et[i].addEventListener('click', function(e) {
e.preventDefault();
var targetUrl = $(this).attr("role");
if(ttags != 'pumpkinTags') {
$("#datatest").html(targetUrl);
$('#inlinecontent').simpledialog2( {'hide': {effect: 'fadeOut',
duration: 5000} } );
}
else {
var ximage = 'img_pumpkins/' + targetUrl + '.png';
$('#popupPumpkin img').attr('src', ximage);
$('#popupPumpkin').popup("open");
}
});
}
// Handles when user clicks on the "Ok" button on the popup
$("#dok").button().on("click", function () {
var path = $("#datatest").html();
$('#dcancel').click(); if (path == "somevalue") { //DO SOMETHING }
});
// This sets the correct dimensions & position for pumpkin image popup
$( document ).on( "pageinit", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
$('#popupPumpkin').css( "top", '60px' );
}
});
});
关注点
要查看 Swipe Clouds 在不同移动应用中的效果，只需点击此处： www.SerGioApps.com
结论
有许多方法可以自定义这些 Swipe Clouds，我将留给读者自行探索它们在 JQuery Mobile 应用中的用法。祝您使用愉快！