HTML PlayBook WebWorks SDK上的jQuery Mobile

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML PlayBook WebWorks SDK上的jQuery Mobile相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Landmark Finder</title>
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
<script src="jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
	// Add a click listener on the button to get the location data
	$('#getLocation').click(function(){
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(onSuccess, onError);
		} else {
			// If location is not supported on this platform, disable it
			$('#getLocation').value = "Geolocation not supported";
			$('#getLocation').unbind('click');
		}		
	});
});

// create the geonames namespace for calling the API
var geonames = {};
	geonames.baseURL = "http://ws.geonames.org/";
	geonames.method = "findNearbyWikipediaJSON";
	geonames.search = function(lat,lng){
	
	// get the data in JSON format from Geonames
	$.getJSON(geonames.baseURL + geonames.method + '?formatted=true&lat=' + lat + 
'&lng=' + lng + '&style=full&radius=10&maxRows=25&username=ryanstewart',function(data){

		// Loop through each item in the result and add it to the DOM
		$.each(data.geonames, function() {
			$('<li></li>')
			.hide()
			.append('<a href="http://'+this.wikipediaUrl+'">
<h2>'+this.title+'</h2></a><br /><p>'+ this.summary + '</p><span class="ui-li-aside">
<h5>'+this.distance+' (km)</h5></span>')
			.appendTo('#wikiList')
			.show();
		});
		// Once the data is added to the DOM, make the transition
		$.mobile.changePage('#dashboard',"slide",false,true);
	
		// refresh the list to make sure the theme applies properly
		$('#wikiList').listview('refresh');
		
		
	});
};

// Success function for Geolocation call
function onSuccess(position)
{
	alert('getting position');
	geonames.search(position.coords.latitude,position.coords.longitude);
}

// Error function for Geolocation call
function onError(msg)
{
	geonames.search(47.667622,-122.384946);
}

</script>
</head>

<body>
<div data-role="page">
	<div data-role="header">
    	<h1>Find Location</h1>
	</div>
    <div data-role="content">
        <p>This application will use the <a href="http://geonames.org">Geonames</a> API and 
your location to bring back a list of Wikipedia articles about features that are near you. 
To get started, click the button below and allow the application to read your geolocation 
information.</p>
        <input type="button" value="Get My Location" id="getLocation" />
    </div>
    <div data-role="footer">
    	<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
    </div>
</div>
<div data-role="page" id="dashboard">
	<div data-role="header">
    	<h1>Data List</h1>
    </div>
    <div data-role="content">
    	<ul id="wikiList" data-role="listview" data-theme="c">
        </ul>
    </div>
    <div data-role="footer">
    	<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
    </div>
</div>
</body>
</html>

滚动条美化插件jquery.nicescroll

今天给大家介绍一个滚动条美化插件jquery.nicescroll，这个插件有以下一个主意事项：

1、兼容所有最新的桌面浏览器和旧版：Chrome，Firefox，Edge，IE8 +，Safari（win / mac），Opera

2、兼容移动设备：iPad / iPhone / iPod，Android 4 +，Blackberry手机和Playbook（WebWorks / Table OS），Windows Phone 8和10

3、兼容所有触摸设备：iPad，Android平板电脑，Window ace

4、基于jQuery 1.x / 2.x / 3.x分支使用

5、下载地址：www.npmjs.com/package/jquery.nicescroll

6、代码需要放在

$(function() );
里面。

一、引入相应的插件

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>

二、写好你的容器

<div id="divs" style="height: 150px; width:150px; overflow:hidden; border: 5px solid #000000;">
<p></p>
<p></p>
</div>

三、写你的js代码

<script type="text/javascript">
$(function()
$("#divs").niceScroll(cursorcolor:"#f80516");
);
</script>

四、然后你就可以看到一个美化过的滚动条了

当然这个插件还有很多的用法和api的。

用法可以在官网查看，下面我就用我18级英语给你们简单的翻译一下吧：

一、用法

1、简单模式

$(function()
$("body").niceScroll();
);

2、返回对象

var nice = false;
$(function()
nice = $("body").niceScroll();
);

3、设置参数

$(function()
$("#divs").niceScroll(
cursorcolor:"#f80516",
cursorwidth:‘10px‘
);
);

4、定义被嵌套的容器

$(function()
$("#divs").niceScroll("#divs2",cursorcolor:"#00F");（www.gendan5.com）
);

5、获取滚动的对象

var nice = $("#mydiv").getNiceScroll();
console.log一下就知道了

6、隐藏滚动条

用这个之前必须设置滚动的参数，下面的代码知识隐藏了滚动条而已。

$("#divs").getNiceScroll().hide();

7、检查滚动条调整大小（内容或位置发生变化时）

$("#mydiv").getNiceScroll().resize();
我试验了一下，这个需要放在你的触发器里面，每次触发内容的时候执行一次就可以，他是不会自己执行的。

8、滚动条位置设置

$("#divs").getNiceScroll(0).doScrollLeft(x, duration); //X
$("#divs").getNiceScroll(0).doScrollTop(y, duration); //Y

下面就介绍一下API吧：

$("#divs").niceScroll(
cursorcolor: "#424242", //光标颜色的十六进制
cursoropacitymin: 0, //当光标处于非活动状态时更改不透明度，范围从1到0
cursoropacitymax: 1, //当光标处于活动状态时改变不透明度（scrollabar“可见”状态），范围从1到0
cursorwidth: "5px", //滚动条宽度
cursorborder: "1px solid #fff", //滚动条边框的css定义
cursorborderradius: "5px", //滚动条的border-radius
zindex: "auto" | [number], //滚动条div的z-index
scrollspeed: 60, //滚动速度
mousescrollstep: 40, //用鼠标滚轮滚动速度（像素）
emulatetouch: false, //启用光标拖动滚动，就像桌面计算机中的触摸设备一样
hwacceleration: true, //支持时使用硬件加速滚动
boxzoom: false, //为框内容启用缩放
dblclickzoom: true, //（仅当boxzoom = true时）双击框时激活缩放
gesturezoom: true, //（仅当boxzoom = true且带有触摸设备时）放大/放入框时激活缩放
grabcursorenabled: true, //（仅当touchbehavior = true时）显示“抓取”图标
autohidemode: true, //true没有滚动时隐藏、"cursor"只隐藏光标、false不要隐藏、"leave"仅在指针离开内容时隐藏、"hidden"总是隐藏、"scroll"仅在滚动时显示
background: "#000", //滚动条背景轨道背景色
iframeautoresize: true, //在加载事件上自动调整iframe
cursorminheight: 32, //设置最小滚动条高度
preservenativescrolling: true, //您可以使用鼠标，冒泡鼠标滚轮事件滚动本机可滚动区域
railoffset: false, //您可以为轨道位置添加偏移顶部/左侧
bouncescroll: false, //（仅限hw accell）启用内容末尾的滚动弹跳，类似于移动设备
spacebarenabled: true, //按空格键时 启用向下滚动页面
railpadding: top: 0, right: 0, left: 0, bottom: 0 , //为轨道填充
disableoutline: true, //对于chrome浏览器，在使用nicescroll选择div时禁用大纲（橙色突出显示）
horizrailenabled: true, //水平滚动
railalign: right, //垂直轨道的对齐
railvalign: bottom, //水平轨道的对齐
enabletranslate3d: true, //使用css translate来滚动内容
enablemousewheel: true, //鼠标滚轮事件
enablekeyboard: true, //键盘事件
smoothscroll: true, //轻松移动滚动
sensitiverail: true, //点击轨道滚动
enablemouselockapi: true, //可以使用鼠标标题锁API（对象拖动时出现同样的问题）
cursorfixedheight: false, //像素中的光标设置固定高度
hidecursordelay: 400, //设置延迟（以微秒为单位）淡出滚动条
directionlockdeadzone: 6, //用于方向锁定激活的死区（以像素为单位）
nativeparentscrolling: true, //检测内容的底部并让父卷轴滚动，就像本机滚动一样
enablescrollonselection: true, //在选择文本时启用内容的自动滚动
cursordragspeed: 0.3, //用光标拖动时的选择速度
rtlmode: "auto", //水平div滚动从左侧开始
cursordragontouch: false, //也可以在touch / touchbehavior模式下拖动光标
oneaxismousemode: "auto", //允许水平滚动鼠标滚轮仅限水平内容，如果为false（仅垂直）鼠标滚轮不水平滚动，如果值为自动检测双轴鼠标
scriptpath: "" //为boxmode图标定义自定义路径
preventmultitouchscrolling: true, //阻止在多点触控事件上滚动
disablemutationobserver: false, //强制MutationObserver被禁用
enableobserver: true, //启用DOM更改观察者，它尝试在父或内容div更改时调整大小/隐藏/显示
scrollbarid: false //为nicescroll栏设置自定义ID
);

以上是关于HTML PlayBook WebWorks SDK上的jQuery Mobile的主要内容，如果未能解决你的问题，请参考以下文章

IBM Worklight - Mac - “'WEBWORKS_HOME' 环境变量未定义”

滚动条美化插件jquery.nicescroll

使用 Phonegap/WebWorks 的黑莓中线程过多

PHP 复选框从webworks检查PHP

在黑莓 Webworks 中构建 PhoneGapSample 时收到错误消息

使用 WebWorks 和 jQuery 1.8.2 在 Blackberry 上打开输入日期字段时出现 URL 错误消息