302 lines
9.6 KiB
JavaScript
302 lines
9.6 KiB
JavaScript
|
||
/* jBox 测试代码开始 */
|
||
var skin2 = false;
|
||
$(function () {
|
||
changeSkin();
|
||
$(window).scroll(function () { $('.sel-skin').css({ top: $(window).scrollTop() + 300 }); });
|
||
});
|
||
|
||
function viewConfig(name) {
|
||
var height = name == 'defaults' ? 500 : 'auto';
|
||
jBox.open('id:' + name, '$.jBox.' + name, 'auto', height, { top: '50px', loaded: function () {
|
||
$('.jbox-content').css('background-color', '#eeeeee').find('pre').css('border', 'none')
|
||
}
|
||
});
|
||
}
|
||
function changeSkin(show) {
|
||
var skin = $('#select-skin').val().split('|');
|
||
document.getElementById('skin').href = "../Skins" + (skin2 == true ? "2" : "") + "/" + skin[0] + "/jbox.css";
|
||
$('.sel-skin').css('background-color', skin[1]);
|
||
if (show) {
|
||
$.jBox.tip('换肤成功，当前皮肤：' + skin[0], 'success');
|
||
}
|
||
}
|
||
function show_jbox_set_defaults() {
|
||
$.jBox.info("请自行在 jBox/i18n/ 目录下修改相应js文件。");
|
||
}
|
||
function show_jbox_set_border(val) {
|
||
$.jBox.setDefaults({ defaults: { border: val} }); // 只修改全局 border
|
||
$.jBox.info('边框已设置为 ' + val);
|
||
}
|
||
|
||
function demo_1_1() {
|
||
$.jBox.info('jQuery jBox<br /><br />版本：v2.0<br />日期：2011-7-24<br />官网：<a target="_blank" href="http://kudystudio.com/jbox">http://kudystudio.com/jbox</a>');
|
||
}
|
||
function demo_1_2() {
|
||
$.jBox('id:id-html', { bottomText: '这是底部文字' });
|
||
}
|
||
function demo_1_3() {
|
||
$.jBox("get:ajax.html");
|
||
}
|
||
function demo_1_4() {
|
||
$.jBox("iframe:http://www.baidu.com", {
|
||
title: "百度一下",
|
||
width: 800,
|
||
height: 350,
|
||
buttons: { '关闭': true }
|
||
});
|
||
}
|
||
function demo_1_5() {
|
||
var content = {
|
||
state1: {
|
||
content: '状态一',
|
||
buttons: { '下一步': 1, '取消': 0 },
|
||
buttonsFocus: 0,
|
||
submit: function (v, h, f) {
|
||
if (v == 0) {
|
||
return true; // close the window
|
||
}
|
||
else {
|
||
$.jBox.nextState(); //go forward
|
||
// 或 $.jBox.goToState('state2')
|
||
}
|
||
return false;
|
||
}
|
||
},
|
||
state2: {
|
||
content: '状态二，请关闭窗口哇：）',
|
||
buttons: { '上一步': 1, '取消': 0 },
|
||
buttonsFocus: 0,
|
||
submit: function (v, h, f) {
|
||
if (v == 0) {
|
||
return true; // close the window
|
||
} else {
|
||
$.jBox.prevState() //go back
|
||
// 或 $.jBox.goToState('state1');
|
||
}
|
||
|
||
return false;
|
||
}
|
||
}
|
||
};
|
||
|
||
$.jBox(content);
|
||
}
|
||
function demo_1_6() {
|
||
var html = "<div style='padding:10px;'>输入姓名：<input type='text' id='yourname' name='yourname' /></div>";
|
||
var submit = function (v, h, f) {
|
||
if (f.yourname == '') {
|
||
$.jBox.tip("请输入您的姓名。", 'error', { focusId: "yourname" }); // 关闭设置 yourname 为焦点
|
||
return false;
|
||
}
|
||
|
||
$.jBox.tip("你叫：" + f.yourname);
|
||
//$.jBox.tip("你叫：" + h.find("#yourname").val());
|
||
//$.jBox.tip("你叫：" + h.find(":input[name='yourname']").val());
|
||
|
||
return true;
|
||
};
|
||
|
||
$.jBox(html, { title: "你叫什么名字？", submit: submit });
|
||
}
|
||
|
||
|
||
function demo_2_1() {
|
||
$.jBox.open("iframe:http://www.baidu.com", "百度一下", 800, 350, { buttons: { '关闭': true} });
|
||
}
|
||
function demo_2_2() {
|
||
var html1 = '<div class="msg-div">' +
|
||
'<p>购买数量：</p><div class="field"><input type="text" id="amount" name="amount" style="width:75px;" value="1" /></div>' +
|
||
'<p>收货地址：</p><div class="field"><textarea id="address" name="address"></textarea></div>' +
|
||
'<div class="errorBlock" style="display: none;"></div>' +
|
||
'</div>';
|
||
|
||
var html2 = '<div class="msg-div">' +
|
||
'<p>给卖家留言：<span style="color:gray">（选填，可以告诉卖家您对商品的特殊要求）</span></p><div class="field"><textarea id="message" name="message"></textarea></div>' +
|
||
'</div>';
|
||
|
||
var data = {};
|
||
var states = {};
|
||
states.state1 = {
|
||
content: html1,
|
||
buttons: { '下一步': 1, '取消': 0 },
|
||
submit: function (v, h, f) {
|
||
if (v == 0) {
|
||
return true; // close the window
|
||
}
|
||
else {
|
||
h.find('.errorBlock').hide('fast', function () { $(this).remove(); });
|
||
|
||
data.amount = f.amount; //或 h.find('#amount').val();
|
||
if (data.amount == '' || parseInt(data.amount) < 1) {
|
||
$('<div class="errorBlock" style="display: none;">请输入购买数量！</div>').prependTo(h).show('fast');
|
||
return false;
|
||
}
|
||
data.address = f.address;
|
||
if (data.address == '') {
|
||
$('<div class="errorBlock" style="display: none;">请输入收货地址！</div>').prependTo(h).show('fast');
|
||
return false;
|
||
}
|
||
|
||
$.jBox.nextState(); //go forward
|
||
// 或 $.jBox.goToState('state2')
|
||
}
|
||
|
||
return false;
|
||
}
|
||
};
|
||
states.state2 = {
|
||
content: html2,
|
||
buttons: { '上一步': -1, '提交': 1, '取消': 0 },
|
||
buttonsFocus: 1, // focus on the second button
|
||
submit: function (v, o, f) {
|
||
if (v == 0) {
|
||
return true; // close the window
|
||
} else if (v == -1) {
|
||
$.jBox.prevState() //go back
|
||
// 或 $.jBox.goToState('state1');
|
||
}
|
||
else {
|
||
data.message = f.message;
|
||
|
||
// do ajax request here
|
||
$.jBox.nextState('<div class="msg-div">正在提交...</div>');
|
||
// 或 $.jBox.goToState('state3', '<div class="msg-div">正在提交...</div>')
|
||
|
||
// asume that the ajax is done, than show the result
|
||
var msg = [];
|
||
msg.push('<div class="msg-div">');
|
||
msg.push('<p>下面是提交的数据</p>');
|
||
for (var p in data) {
|
||
msg.push('<p>' + p + ':' + data[p] + '</p>');
|
||
}
|
||
msg.push('</div>');
|
||
window.setTimeout(function () { $.jBox.nextState(msg.join('')); }, 2000);
|
||
}
|
||
|
||
return false;
|
||
}
|
||
};
|
||
states.state3 = {
|
||
content: '',
|
||
buttons: {} // no buttons
|
||
};
|
||
states.state4 = {
|
||
content: '',
|
||
buttons: { '确定': 0 }
|
||
};
|
||
|
||
$.jBox.open(states, '提交订单', 450, 'auto');
|
||
}
|
||
|
||
|
||
function demo_3_1() {
|
||
//加了个其它参数closed
|
||
$.jBox.prompt('Hello jBox', 'jBox', 'info', { closed: function () { alert('prompt is closed.'); } });
|
||
}
|
||
function demo_3_2() {
|
||
$.jBox.alert('Hello jBox', 'jBox');
|
||
}
|
||
function demo_3_3() {
|
||
$.jBox.info('Hello jBox', 'jBox');
|
||
}
|
||
function demo_3_4() {
|
||
$.jBox.success('Hello jBox', 'jBox');
|
||
}
|
||
function demo_3_5() {
|
||
$.jBox.error('Hello jBox', 'jBox');
|
||
}
|
||
function demo_3_6() {
|
||
var submit = function (v, h, f) {
|
||
if (v == 'ok')
|
||
jBox.tip(v, 'info');
|
||
else if (v == 'cancel')
|
||
jBox.tip(v, 'info');
|
||
|
||
return true; //close
|
||
};
|
||
|
||
$.jBox.confirm("确定吗？", "提示", submit);
|
||
}
|
||
function demo_3_6_2() {
|
||
var submit = function (v, h, f) {
|
||
if (v == true)
|
||
jBox.tip("恩", 'info');
|
||
else
|
||
jBox.tip("好吖", 'info');
|
||
|
||
return true;
|
||
};
|
||
// 自定义按钮
|
||
$.jBox.confirm("天使，做我女朋友吧？", "表白提示", submit, { buttons: { '恩': true, '好吖': false} });
|
||
}
|
||
function demo_3_7() {
|
||
var submit = function (v, h, f) {
|
||
if (v == 'yes') {
|
||
$.jBox.tip('已保存。', 'success');
|
||
}
|
||
if (v == 'no') {
|
||
$.jBox.tip('没保存。');
|
||
}
|
||
if (v == 'cancel') {
|
||
$.jBox.tip('已取消。');
|
||
}
|
||
|
||
return true;
|
||
};
|
||
// 可根据需求仿上例子定义按钮
|
||
$.jBox.warning("内容已修改，是否保存？", "提示", submit);
|
||
}
|
||
|
||
function demo_4_1() {
|
||
$.jBox.tip('Hello jBox');
|
||
}
|
||
function demo_4_2() {
|
||
//加了个其它参数focusId
|
||
$.jBox.tip('关闭后设置输入框为焦点', 'info', { focusId: 'tip-input' });
|
||
}
|
||
function demo_4_3() {
|
||
//加了个其它参数closed
|
||
$.jBox.tip('关闭后设置输入框为已选', 'error', { closed: function () { $('#tip-input2').select(); } });
|
||
}
|
||
function demo_4_4() {
|
||
$.jBox.tip("正在XX，你懂的...", 'loading');
|
||
// 模拟2秒后完成操作
|
||
window.setTimeout(function () { $.jBox.tip('XX已完成。', 'success'); }, 2000);
|
||
}
|
||
function demo_4_5() {
|
||
var submit = function (v, h, f) {
|
||
if (v == 'ok') {
|
||
$.jBox.tip("正在删除数据...", 'loading');
|
||
// 模拟2秒后完成操作
|
||
window.setTimeout(function () { $.jBox.tip('删除成功。', 'success'); }, 2000);
|
||
}
|
||
else if (v == 'cancel') {
|
||
// 取消
|
||
}
|
||
|
||
return true; //close
|
||
};
|
||
|
||
$.jBox.confirm("确定要删除数据吗？", "提示", submit);
|
||
}
|
||
|
||
function demo_5_1() {
|
||
$.jBox.messager('Hello jBox', 'jBox');
|
||
}
|
||
function demo_5_2() {
|
||
$.jBox.messager("Hello jBox 2", "my title", null, { width: 350, showType: 'fade' });
|
||
}
|
||
function demo_5_3() {
|
||
$.jBox.messager("Hello jBox 3", "my title", 3000, {
|
||
width: 350,
|
||
icon: 'info',
|
||
showType: 'show',
|
||
buttons: { '去看看': true },
|
||
submit: function (v, h, f) {
|
||
$.jBox.info('看个蛋蛋？');
|
||
return true;
|
||
}
|
||
});
|
||
}
|