zoukankan      html  css  js  c++  java
  • jBox使用方法

      1 <!DOCTYPE html>
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      5     <title></title>
      6     <link href="css/jbox.css" rel="stylesheet" />
      7 </head>
      8 <body>
      9     名字:<input type="text" id="name" />
     10     <select>
     11         <option>1</option>
     12         <option>2</option>
     13         <option>3</option>
     14         <option>4</option>
     15     </select>
     16     <input type="button" value="demo00" onclick="demo00();" />
     17     <input type="button" value="demo01" onclick="demo01();" />
     18     <input type="button" value="demo01_2" onclick="demo01_2();" />
     19 
     20     <input type="button" value="demo02" onclick="demo02();" />
     21     <input type="button" value="demo03" onclick="demo03();" />
     22     <input type="button" value="demo04" onclick="demo04();" />
     23     <input type="button" value="demo042" onclick="demo042();" />
     24     <input type="button" value="demo043" onclick="demo043();" />
     25     <input type="button" value="demo044" onclick="demo044();" />
     26     <input type="button" value="demo045" onclick="demo045();" />
     27     <input type="button" value="demo046" onclick="demo046();" />
     28     <input type="button" value="demo05" onclick="demo05();" />
     29     <input type="button" value="demo06" onclick="demo06();" />
     30     <br /><br />
     31     <input type="button" value="complex01" onclick="complex01();" />
     32     <input type="button" value="demo07" onclick="demo07();" />
     33     <input type="button" value="demo08" onclick="demo08();" />
     34     <input type="button" value="demo09" onclick="demo09();" />
     35     <input type="button" value="demo01_2" onclick="demo01_2();" />
     36     <div style="text-align:center;clear:both">
     37     </div>
     38     <script src="js/jquery-1.4.2.min.js"></script>
     39     <script src="js/jquery.jBox.src.js"></script>
     40     <script type="text/javascript">
     41         /* jBox 全局设置 */
     42         //var _jBoxConfig = {};
     43         //_jBoxConfig.defaults = {
     44         //    id: null, /* 在页面中的唯一ID,如果为null则自动为随机ID,一个ID只会显示一个jBox */
     45         //    top: '15%', /* 窗口离顶部的距离,可以是百分比或像素(如 '100px') */
     46         //    border: 5, /* 窗口的外边框像素大小,必须是0以上的整数 */
     47         //    opacity: 0.2, /* 窗口隔离层的透明度,如果设置为0,则不显示隔离层 */
     48         //    timeout: 0, /* 窗口显示多少毫秒后自动关闭,如果设置为0,则不自动关闭 */
     49         //    showType: 'fade', /* 窗口显示的类型,可选值有:show、fade、slide */
     50         //    showSpeed: 'fast', /* 窗口显示的速度,可选值有:'slow'、'fast'、表示毫秒的整数 */
     51         //    showIcon: true, /* 是否显示窗口标题的图标,true显示,false不显示,或自定义的CSS样式类名(以为图标为背景) */
     52         //    showClose: true, /* 是否显示窗口右上角的关闭按钮 */
     53         //    draggable: true, /* 是否可以拖动窗口 */
     54         //    dragLimit: true, /* 在可以拖动窗口的情况下,是否限制在可视范围 */
     55         //    dragClone: false, /* 在可以拖动窗口的情况下,鼠标按下时窗口是否克隆窗口 */
     56         //    persistent: true, /* 在显示隔离层的情况下,点击隔离层时,是否坚持窗口不关闭 */
     57         //    showScrolling: true, /* 是否显示浏览的滚动条 */
     58         //    ajaxData: {},  /* 在窗口内容使用post:前缀标识的情况下,ajax post的数据,例如:{ id: 1 } 或 "id=1" */
     59         //    iframeScrolling: 'auto', /* 在窗口内容使用iframe:前缀标识的情况下,iframe的scrolling属性值,可选值有:'auto'、'yes'、'no' */
     60 
     61         //    title: 'jBox', /* 窗口的标题 */
     62         //     350, /* 窗口的宽度,值为'auto'或表示像素的整数 */
     63         //    height: 'auto', /* 窗口的高度,值为'auto'或表示像素的整数 */
     64         //    bottomText: '', /* 窗口的按钮左边的内容,当没有按钮时此设置无效 */
     65         //    buttons: { '确定': 'ok' }, /* 窗口的按钮 */
     66         //    buttonsFocus: 0, /* 表示第几个按钮为默认按钮,索引从0开始 */
     67         //    loaded: function (h) { }, /* 窗口加载完成后执行的函数,需要注意的是,如果是ajax或iframe也是要等加载完http请求才算窗口加载完成,参数h表示窗口内容的jQuery对象 */
     68         //    submit: function (v, h, f) { return true; }, /* 点击窗口按钮后的回调函数,返回true时表示关闭窗口,参数有三个,v表示所点的按钮的返回值,h表示窗口内容的jQuery对象,f表示窗口内容里的form表单键值 */
     69         //    closed: function () { } /* 窗口关闭后执行的函数 */
     70         //};
     71         //_jBoxConfig.stateDefaults = {
     72         //    content: '', /* 状态的内容,不支持前缀标识 */
     73         //    buttons: { '确定': 'ok' }, /* 状态的按钮 */
     74         //    buttonsFocus: 0, /* 表示第几个按钮为默认按钮,索引从0开始 */
     75         //    submit: function (v, h, f) { return true; } /* 点击状态按钮后的回调函数,返回true时表示关闭窗口,参数有三个,v表示所点的按钮的返回值,h表示窗口内容的jQuery对象,f表示窗口内容里的form表单键值 */
     76         //};
     77         //_jBoxConfig.tipDefaults = {
     78         //    content: '', /* 提示的内容,不支持前缀标识 */
     79         //    icon: 'info', /* 提示的图标,可选值有'info'、'success'、'warning'、'error' */
     80         //    top: '40%', /* 提示离顶部的距离,可以是百分比或像素(如 '100px') */
     81         //     'auto', /* 提示的高度,值为'auto'或表示像素的整数 */
     82         //    height: 'auto', /* 提示的高度,值为'auto'或表示像素的整数 */
     83         //    opacity: 0, /* 窗口隔离层的透明度,如果设置为0,则不显示隔离层 */
     84         //    timeout: 2000, /* 提示显示多少毫秒后自动关闭,必须是大于0的整数 */
     85         //    closed: function () { } /* 提示关闭后执行的函数 */
     86         //};
     87         //_jBoxConfig.messagerDefaults = {
     88         //    content: '', /* 信息的内容,不支持前缀标识 */
     89         //    title: 'jBox', /* 信息的标题 */
     90         //    icon: 'none', /* 信息图标,值为'none'时为不显示图标,可选值有'none'、'info'、'question'、'success'、'warning'、'error' */
     91         //     350, /* 信息的高度,值为'auto'或表示像素的整数 */
     92         //    height: 'auto', /* 信息的高度,值为'auto'或表示像素的整数 */
     93         //    timeout: 3000, /* 信息显示多少毫秒后自动关闭,如果设置为0,则不自动关闭 */
     94         //    showType: 'slide', /* 信息显示的类型,可选值有:show、fade、slide */
     95         //    showSpeed: 600, /* 信息显示的速度,可选值有:'slow'、'fast'、表示毫秒的整数 */
     96         //    border: 0, /* 信息的外边框像素大小,必须是0以上的整数 */
     97         //    buttons: {}, /* 信息的按钮 */
     98         //    buttonsFocus: 0, /* 表示第几个按钮为默认按钮,索引从0开始 */
     99         //    loaded: function (h) { }, /* 窗口加载完成后执行的函数,参数h表示窗口内容的jQuery对象 */
    100         //    submit: function (v, h, f) { return true; }, /* 点击信息按钮后的回调函数,返回true时表示关闭窗口,参数有三个,v表示所点的按钮的返回值,h表示窗口内容的jQuery对象,f表示窗口内容里的form表单键值 */
    101         //    closed: function () { } /* 信息关闭后执行的函数 */
    102         //};
    103         //_jBoxConfig.languageDefaults = {
    104         //    close: '关闭', /* 窗口右上角关闭按钮提示 */
    105         //    ok: '确定', /* $.jBox.prompt() 系列方法的“确定”按钮文字 */
    106         //    yes: '是', /* $.jBox.warning() 方法的“是”按钮文字 */
    107         //    no: '否', /* $.jBox.warning() 方法的“否”按钮文字 */
    108         //    cancel: '取消' /* $.jBox.confirm() 和 $.jBox.warning() 方法的“取消”按钮文字 */
    109         //};
    110 
    111         //$.jBox.setDefaults(_jBoxConfig);
    112 
    113         function demo00() {
    114             jBox('id:right-text', { showIcon: 'jbox-title-icon' });
    115         }
    116         function demo01() {
    117             jBox.tip("Hello jBox");
    118             //jBox.tip("提示关闭后设置输入框为焦点", 'success', { focusId: 'name' });
    119             //jBox.tip("提示关闭后设置输入框为焦点", 'info', { top: '30%',  300, focusId: 'name', closed: function () { alert('before focus input...'); } });
    120         }
    121         function demo01_2() {
    122             jBox.tip("Loading...", 'loading');
    123             // 模拟2秒后完成操作
    124             window.setTimeout(function () { jBox.tip('操作成功。', 'success'); }, 2000);
    125         }
    126         function demo02() {
    127             jBox.alert("Hello jBox");
    128             //jBox.alert("Hello jBox", 'Title', { top: '250px',  400, height: 150 });
    129         }
    130         function demo03() {
    131             var submit = function (v, h, f) {
    132                 if (v == true)
    133                     jBox.tip("恩", 'success');
    134                 else
    135                     jBox.tip("好吖", 'success');
    136                 return true;
    137             };
    138 
    139             jBox.confirm("猪,做我女朋友吧?", "表白提示", submit, { id: 'hahaha', showScrolling: false, buttons: { '恩': true, '好吖': false } });
    140         }
    141         function demo04() {
    142             jBox.open("iframe:http://www.baidu.com", "百度一下", 800, 350);
    143         }
    144         function demo042() {
    145             jBox.open("iframe:http://www.baidu.com", null, 800, 350, {
    146                 buttons: { '关闭': true }, iframeScrolling: 'no', showClose: false, loaded: function (h) {
    147                     jBox.tip('loaded');
    148                 }
    149             });
    150         }
    151         function demo043() {
    152             jBox.open("iframe:http://www.baidu.com", "百度一下", 800, 350, { buttons: { '关闭': true } });
    153         }
    154         function demo044() {
    155             jBox.open("get:ajax.html", null, 'auto', 'auto', { buttons: {} });
    156         }
    157         function demo045() {
    158             jBox.open("get:ajax.html", "Ajax Get", 600, 250, { buttons: {} });  //
    159         }
    160         function demo046() {
    161             jBox.open("get:ajax.html", "Ajax Get", 'auto', 'auto', { buttons: { '关闭': true }, persistent: false });
    162         }
    163         function demo05() {
    164             var html = "<div style='padding:10px;'>输入姓名:<input type='text' id='yourname' name='yourname' value='小明' /></div>";
    165             var submit = function (v, h, f) {
    166                 if (f.yourname == '') {
    167                     jBox.tip("请输入您的姓名。", 'error', { focusId: "yourname" }); // 关闭设置 yourname 为焦点
    168                     return false;
    169                 }
    170 
    171                 jBox.tip("你叫:" + f.yourname);
    172                 //jBox.tip("你叫:" + h.find("#yourname").val());
    173                 //jBox.tip("你叫:" + h.find(":input[name='yourname']").val());
    174 
    175                 return true;
    176             };
    177 
    178             jBox(html, {
    179                 title: "你叫什么名字?", submit: submit, loaded: function (h) {
    180                     //jBox.tip('loaded');
    181                     jBox.tip(h.find("#yourname").val());
    182                 }
    183             });
    184         }
    185 
    186         function demo06() {
    187             var submit = function (v, h, f) {
    188                 if (v == 'yes') {
    189                     jBox.tip('已保存。');
    190                 }
    191                 if (v == 'no') {
    192                     jBox.tip('没保存。');
    193                 }
    194                 if (v == 'cancel') {
    195                     jBox.tip('已取消。');
    196                 }
    197 
    198                 return true;
    199             };
    200 
    201             jBox.warning("内容已修改,是否保存?", "提示", submit);
    202         }
    203         function demo07() {
    204             jBox.messager("messager", "my title", 3000, {  250, showType: 'slide', icon: 'info' });
    205         }
    206         function demo08() {
    207             jBox.messager("messager 3", "my title", 3000, {  250, showType: 'fade' });
    208         }
    209         function demo09() {
    210             jBox.messager("messager 2", "my title", 3000, {  250, showType: 'show' });
    211         }
    212 
    213 
    214         function complex01() {
    215             var html1 = '<div class="msg-div">' +
    216                         '<p>购买数量:</p><div class="field"><input type="text" id="amount" name="amount" style="75px;" value="1" /></div>' +
    217                         '<p>收货地址:</p><div class="field"><textarea id="address" name="address"></textarea></div>' +
    218                         '<div class="errorBlock" style="display: none;"></div>' +
    219                         '</div>';
    220 
    221             var html2 = '<div class="msg-div">' +
    222                         '<p>给卖家留言:<span style="color:gray">(选填,可以告诉卖家您对商品的特殊要求)</span></p><div class="field"><textarea id="message" name="message"></textarea></div>' +
    223                         '</div>';
    224 
    225             var data = {};
    226             var states = {};
    227             states.state1 = {
    228                 content: html1,
    229                 buttons: { '下一步': 1, '取消': 0 },
    230                 submit: function (v, h, f) {
    231                     if (v == 0) {
    232                         return true; // close the window
    233                     }
    234                     else {
    235                         h.find('.errorBlock').hide('fast', function () { $(this).remove(); });
    236 
    237                         data.amount = f.amount; //或 h.find('#amount').val();
    238                         if (data.amount == '' || parseInt(data.amount) < 1) {
    239                             $('<div class="errorBlock" style="display: none;">请输入购买数量!</div>').prependTo(h).show('slow');
    240                             return false;
    241                         }
    242                         data.address = f.address;
    243                         if (data.address == '') {
    244                             $('<div class="errorBlock" style="display: none;">请输入收货地址!</div>').prependTo(h).show('slow');
    245                             return false;
    246                         }
    247 
    248                         jBox.nextState(); //go forward
    249                         // 或 jBox.goToState('state2')
    250                     }
    251 
    252                     return false;
    253                 }
    254             };
    255             states.state2 = {
    256                 content: html2,
    257                 buttons: { '上一步': -1, '提交': 1, '取消': 0 },
    258                 buttonsFocus: 1, // focus on the second button
    259                 submit: function (v, o, f) {
    260                     if (v == 0) {
    261                         return true; // close the window
    262                     } else if (v == -1) {
    263                         jBox.prevState() //go back
    264                         // 或 jBox.goToState('state1');
    265                     }
    266                     else {
    267                         data.message = f.message;
    268 
    269                         // do ajax request here
    270                         jBox.nextState('<div class="msg-div">正在提交...</div>');
    271                         // 或 jBox.goToState('state3', '<div class="msg-div">正在提交...</div>')
    272 
    273                         // asume that the ajax is done, than show the result
    274                         var msg = [];
    275                         msg.push('<div class="msg-div">');
    276                         msg.push('<p>下面是提交的数据</p>');
    277                         for (var p in data) {
    278                             msg.push('<p>' + p + ':' + data[p] + '</p>');
    279                         }
    280                         msg.push('</div>');
    281                         window.setTimeout(function () { jBox.nextState(msg.join('')); }, 2000);
    282                     }
    283 
    284                     return false;
    285                 }
    286             };
    287             states.state3 = {
    288                 content: '',
    289                 buttons: {} // no buttons
    290             };
    291             states.state4 = {
    292                 content: '',
    293                 buttons: { '确定': 0 }
    294             };
    295 
    296             jBox.open(states, '提交订单', 450, 'auto');
    297             // 或 jBox(states, {  450, height: 'auto', title: '提交订单' });
    298         }
    299 
    300 
    301         function demo10() {
    302             var html1 = '<div class="msg-div">' +
    303                         '<p>购买数量:</p><div class="field"><input type="text" id="amount" name="amount" style="75px;" value="1" /></div>' +
    304                         '<p></p><div class="field"><input type="button" value="提交" /></div>' +
    305                         '</div>';
    306             $.jBox.open(html1, "my title", 300, 300, { showType: 'show' });
    307         }
    308 
    309 
    310         $(function () {
    311 
    312 
    313         });
    314 
    315     </script>
    316     </body>
    317 </html>
  • 相关阅读:
    《Django By Example》第十二章(终章) 中文 翻译 (个人学习,渣翻)
    《Django By Example》第十一章 中文 翻译 (个人学习,渣翻)
    《Django By Example》第十章 中文 翻译 (个人学习,渣翻)
    《Django By Example》第九章 中文 翻译 (个人学习,渣翻)
    《Django By Example》第八章 中文 翻译 (个人学习,渣翻)
    《Django By Example》第五章 中文 翻译 (个人学习,渣翻)
    我的superui开源后台bootstrap开发框架
    LayoutInflater 总结
    Android屏幕分辨率概念(dp、dip、dpi、sp、px)
    android studio安装问题
  • 原文地址:https://www.cnblogs.com/sharpest/p/6102129.html
Copyright © 2011-2022 走看看