Open 3012727 opened 10 years ago
图列形
<!div data-bb-type="grid-layout" data-bb-style="square">
<!div data-bb-type="row">
<!div data-bb-type="item" data-bb-img="01.png" data-bb-title="德州扑克" onclick="javascript:location.href='http://html5.boyaa.com/texas/pf/bypass'">
<!div data-bb-type="item" data-bb-img="02.png" data-bb-title="斗地主" onclick="javascript:location.href='http://html5.boyaa.com/ddz/pf/bypass'">
<!div data-bb-type="item" data-bb-img="03.png" data-bb-title="四川麻将" onclick="javascript:location.href='http://html5.boyaa.com/mahjong/pf/bypass'">
一行(row)的数量可以根据需要添加
线条与文字 <!div data-bb-type="round-panel"> <!div data-bb-type="panel-header">请输入信息(不必全填)
按钮 <!div data-bb-type="button" onclick="getQRCode()" >生成二维码
底部 <!div data-bb-type="action-bar">
带返回的底部 <!div data-bb-type="action-bar" data-bb-back-caption="Back">
带主菜单的底部 <!div data-bb-type="action-bar"> <!div onclick="bb.pushScreen('1.html', '1');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">工作犬 <!div onclick="bb.pushScreen('2.html', '2');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">牧羊犬 <!div onclick="bb.pushScreen('3.html', '3');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">玩赏犬 <!div onclick="bb.pushScreen('4.html', '4');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">梗类犬 <!div onclick="bb.pushScreen('5.html', '5');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">狩猎犬 <!div onclick="bb.pushScreen('6.html', '6');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">猎枪犬
带按钮的底部 <!div data-bb-type="action-bar"> <!div onclick="app.getCurrentWeather();" id="btnCurWeather" data-bb-type="action" data-bb-selected="true" data-bb-style="button" data-bb-img="images/icons/today.png" data-bb-selected="true">Today <!div onclick="app.getTomorrowsWeather();" id="btnTmwWeather" data-bb-type="action" data-bb-style="button" data-bb-img="images/icons/tomorrow.png">Tomorrow <!div onclick="app.get7DaysWeather();" id="btn7DaysWeather" data-bb-type="action" data-bb-style="button" data-bb-img="images/icons/sevendays.png">Next 7 days
带次级目录的底部 <!div data-bb-type="action-bar"> <!div onclick="addCity.getLocation();" id="btngetLocation" data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="images/icons/location.png">Use current location <!div onclick="showScreen.addCity();" id="btnaddCity" data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="images/icons/add.png">Add a city
加载 一般样式 <!div data-bb-type="activity-indicator" id="indicator" data-bb-size="medium" style="margin:0 auto">
美化样式
下滑菜单
<!div data-bb-type="menu"> <!div onclick="bb.pushScreen();" data-bb-type="menu-item" data-bb-img="images/icons/about.png" data-bb-pin="left">About
评分 function rateit(){ blackberry.invoke.invoke({ target: "sys.appworld", action: "bb.action.OPEN", uri: "appworld://content/" + id }, null, null); } 邮箱 function email() { blackberry.invoke.card.invokeEmailComposer({ subject: "musicapp", body: "hello", to: ["tk74508@126.com"],
},
function(success) {
},
function (cancel) {
},
function (error) {
}
);
}
调用浏览器打开网址 function weibo() { blackberry.invoke.invoke({ target: "sys.browser", uri: "http://xxxxxx" }, null, null); }
更多应用 function more() { blackberry.invoke.invoke({ target: "sys.appworld", action: "bb.action.OPEN", uri: "http://appworld.blackberry.com/webstore/vendor/开发者id" }, null, null); } 分享 var bbutils = {
loadShareCard : function() { // Load the share card
request = {
action : 'bb.action.SHARE',
target_type : ["APPLICATION", "VIEWER", "CARD"], 可选
mime : "text/plain",
data : "xxxxx(分享的内容,因为与数字)xxx"
}
blackberry.invoke.card.invokeTargetPicker(request, "share",
// success
// success
function() {},
// error
function(e) {
console.log(e);
});
} }
消息窗
样式一
function showToast1() {
var message = 'This is a simple Toast';
blackberry.ui.toast.show(message);
}
样式二 function showToast2() { var message = 'This is my toast!', buttonText = 'Click Me', toastId,
onButtonSelected = function () {
alert('Button was clicked for toast: ' + toastId);
},
onToastDismissed = function () {
alert('Toast disappeared: ' + toastId);
};
options = {
buttonText : buttonText,
buttonCallback : onButtonSelected,
dismissCallback : onToastDismissed
};
toastId = blackberry.ui.toast.show(message, options);
}
长按选项卡 var myItem = { actionId: 'MyCustomAction', label: 'Make it rain!', icon:'../images/rain.png' }, contexts = [blackberry.ui.contextmenu.CONTEXT_IMAGE]; blackberry.ui.contextmenu.addItem(contexts, myItem, function() { showToast('You made it rain!'); });
文件分享
文档 function shareDoc() { var type = 'doc'; var details = { mode: blackberry.invoke.card.FILEPICKER_MODEPICKER, filter: [".pdf", ".txt", ".doc", "_.log"] }; invokeFilePicker(details, type); }
音乐 function shareMusic() { var type = 'music'; var details = { mode: blackberry.invoke.card.FILEPICKER_MODEPICKER, filter: [".wav", "_.mp3"] }; invokeFilePicker(details, type); }
视频 function shareVideo() { var type = 'video'; var details = { mode: blackberry.invoke.card.FILEPICKER_MODEPICKER, filter: [".mp4", "_.m4v"] }; invokeFilePicker(details, type); }
function invokeFilePicker(details, type) { blackberry.invoke.card.invokeFilePicker(details, function(path) {
// image
if(type === 'image') {
var title = "Share Image";
var request = {
action: 'bb.action.SHARE',
uri: 'file://' + path,
target_type: ["CARD"]
};
loadShareCard(title, request);
// document
} else if(type === 'doc') {
var title = "Share Document";
var request = {
action: 'bb.action.SHARE',
uri: 'file://' + path,
target_type: ["APPLICATION", "VIEWER"]
};
loadShareCard(title, request);
// music
} else if(type === 'music') {
var title = "Share Music";
var request = {
action: 'bb.action.SHARE',
uri: 'file://' + path,
target_type: ["APPLICATION", "VIEWER", "CARD"]
};
loadShareCard(title, request);
// video
} else if(type === 'video') {
var title = "Share Video";
var request = {
action: 'bb.action.SHARE',
uri: 'file://' + path,
target_type: ["APPLICATION", "VIEWER", "CARD"]
};
loadShareCard(title, request);
}
},
// cancelled filepicker
function(reason) {
alert("cancelled " + reason);
// filepicker error
}, function(error) {
if(error) {
alert("invoke error " + error);
} else {
console.log("invoke success ");
}
});
}
// load the share card function loadShareCard(title, request) { blackberry.invoke.card.invokeTargetPicker(request, title, // success function() {},
// error
function(e) {
console.log(e);
});
}
HTML5开发BB10应用学习笔记 BBUI基本样式(SDK1.0)
注:!为使文档正常显示添加
以下是作为自已学习的笔记,仅仅用作交流和参考。
软件简单结构图
加载效果 渐出 <!div data-bb-type="screen" data-bb-effect="fade" > 从左滑入 ……data-bb-effect="slide-left" …… 从右滑入 ……slide-right…… 向上滑入 ……slide-up…… 向下滑入 ……slide-down……
标题 一般标题 <!div data-bb-type="title" data-bb-caption="标题" >
带返回的标题 <!div data-bb-type="title" data-bb-caption="标题" data-bb-back-caption="Back" >
内容 列表形排列 <!div data-bb-type="image-list" > <!div data-bb-type="item" data-bb-img="zr.png" data-bb-title="自然" onclick="bb.pushScreen('4.html', '4');">nature