jqueryUI

时间 2019-11-10

标签 jqueryui 栏目 JQuery 繁體版

原文原文链接

jqueryUI须要下载对应的部件，也可所有下载。javascript

jquery-ui-1.8.18.custom.js & jquery-ui-1.8.18.custom.csscss

api官网：虽然难懂点，但仍是最全面的 http://api.jqueryui.com/html

UI组件内容：前端

Tabs
Dialog
accordion

Tabsjava

<div id="mytab">
<ul>
<li><a href="#tabs-1"><span></span>3Third</a></li>
<li><a href="#tabs-2">3Second</a></li>
<li><a href="#tabs-3">1Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum</div>
<div id="tabs-2">Phasellus</div>
<div id="tabs-3">zhangsan</div>
</div>
<script>

/**
* 标签页（Tabs）有一组必须使用的特定标记，以便标签页能正常工做：
* 标签页（Tabs）必须在一个有序的（<ol>）或无序的（<ul>）列表中
* 每一个标签页的 "title" 必须在一个列表项（<li>）的内部，且必须用一个带有 href 属性的锚（<a>）包裹。
* 每一个标签页面板能够是任意有效的元素，可是它必须带有一个 id，该 id 与相关标签页的锚中的哈希相对应
*/
$(function(){
//$('#mytab').tabs(); --最初始的tabs
//$('#mytab').tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" }); --水平位置上可拖拽
var $tabs = $('#mytab').tabs({
tabTemplate: '<li><a href="#{href}">#{label}</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>',
panelTemplate: '<div><h5>我是模板</h5></div>',
//disabled : [1], //不可点击项设置
spinner:'加载...', // 对于remote加载时，会将spinner内容展现在tabs页签中，页签中必需要有<span></span>做为容器。default:<em>Loading&#8230;</em>
selected: 3, //默认选择项
idPrefix: "Tabs-", //default is 'ui-tabs-',默认ID设置
fx: [{height:'toggle',duration:2000},{height:'toggle',duration:2000}], //Enable animations,动画效果[hideObj,showObj],
'event': 'mouseover', //tabs切换的触发事件，鼠标聚焦时触发，default:click
//cookie: { expires: 7, path: '/', domain: 'jquery.com', secure: true }, //cookie记录最后一次操做的tabs的index,目前没试出来
collapsible: true, //对于当前活动的tabs，再次点击是否折叠
cache: true, //对于缓存的内容是否remote 每次都刷新，仍是仅加载一次。
ajaxOptions : {async:false, success: function(){alert('我是ajax的内容')}}, //页面远端调用数据的额外处理
load: function(event, ui){
console.log("远程的我被载入了" + ui.index);
},
add: function(event, ui){
console.log("我被增长了:" + ui.index);
$('h5', ui.panel).text("I'm Forth");
},
create: function(event, ui){
console.log("我被建立了:" + ui.index);
},
disable: function(event, ui){
console.log("我被禁用了:" + ui.index);
},
enable : function(event, ui){
console.log("我被启用了:" + ui.index);
},
select: function(event, ui){
console.log("我被选择了:" + ui.index);
$tabs.tabs('enable', 2); //启用第1个
},
show: function(event, ui){
console.log("我出现了:" + ui.index);
},
remove: function(event, ui){
console.log("我被移除了:" + ui.index); //移除后变为-1
}
});
$tabs.tabs('add', '#tabs-' + ($("li").length + 1), '4Forth', $("li").length); // 注意此时的序号必定要正确，否则add方法中找到的ui就不对
$tabs.tabs('disable', [2,3]); //禁用第3，4个
$tabs.tabs('select', 3); //第4个被选中
//$tabs.tabs('load', 0); //重载load，<li><a href="loadText.html">loadMyJson</a></li>这种href中加载远端地址载入在每次点击时都会被无情的刷新即便cache为true，也不行，慎用
$tabs.tabs('url', 0, "loadText.html"); //动态载入远端地址 

console.log($tabs.tabs('length'));
console.log($tabs.tabs('option')); //获取当前的tabs的全部选择项
console.log($tabs.tabs('option', 'tabTemplate')); //获取指定的options
//console.log($tabs.tabs('option', 'disabled', [0])); // set指定的option
//$tabs.tabs('destroy'); //毁掉全部tabs的引入和建立，移除tabs的影响
//$tabs.tabs( "rotate", 2000, true); // tabs的自动切换2s
//$tabs.tabs( "abort" ); // 终结ajax加载和动画
var widget = $tabs.tabs( "widget" ); // 返回当前部件
// $tabs事件绑定也可经过tabs+事件名的形式，动态绑定
$('#mytab').bind("tabsselect", function(event,ui){
console.log("我是动态的事件");
});

/**
* 删除操做（针对jquery1.4）
*/
$(".ui-icon-close").bind('click', function(){
var index = $("li").index(this);
$tabs.tabs('remove', index);
});
});
</script>

Tabs

Dialogjquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.18.custom.css"/>
        <script type="text/javascript" src="../js/jquery1.4.2.js" ></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.js" ></script>
        <style type="text/css" rel="stylesheet">
            .bg_red{
                background-color: palevioletred;
            }
        </style>
    </head>
    <body>
        <div id="myDialog" title="对话框">我是一个对话框
            <input type="text"  />
        </div>
        
        <div id="myDialog2" title="对话框2">我是一个对话框2
        </div>
        <p id="validateTips">All form fields are required.</p>
        <div id="formDialog" title="Form对话框">
            <form>
                <span>*用户</span><input type="text" name="user" required maxlength="8" minlength="4"/><br />
                <span>*密码</span><input type="password" name="pwd" required maxlength="12" minlength="8"/><br />
                <span>*邮箱</span><input type="email" name="email" required/><br />
            </form>
        </div>
        
        <button type="button" id="openDialogBtn">打开对话框</button>
        <script>
            
            
            
            /**
             * this need a div element to be a container of dialog.
             * title: titlebar  text:container text.
             */
            $(function(){
                var tips = $('#validateTips');
                $("#myDialog2").dialog({position:'center'});    //默认是自动打开
                var $dialog = $("#myDialog").dialog({
                    autoOpen: false,                      //default:true, 是否自动打开
                    buttons: {'关闭' : function(){$dialog.dialog('close');}},  //default:{}, 按钮功能， 函数不能有参数
                    closeOnEscape: true,           //default:true, 按Esc键关闭对话框
                    closeText : '我是关闭的×',     //default:'close'，其实没多大用，<span></span>的class会覆盖掉内容，仅仅在ele中能够看到，在页面上看不出来
                    dialogClass: 'bg_red',              //default:'',用于给对话框添加额外的class，其实也没多大用，通常会直接修改对应的css或覆写css。
                    //disabled: true,                //default:false,用于禁用dialog的元素，在1.8.2中已经将其去掉了
                    draggable: true,               //default:true, 是否可拖拽
                    height: 300,                   // default:'auto'
                    maxHeight: 500,                 // default:false 不作限制
                    minHeight:200,                  // default:150
                    width:600,                        // default:300
                    maxWidth:800,                    // default:false
                    minWidth:300,                     // default:150
                    title:'我是对话框',                  // default:'',也可在div中设置 title
                    zIndex:500,                       // default:1000,
                    position: 'left',                //default:'center', 'top'left,bottom,right也但是指定的position={left:200,top:300}
                    resizable: true,                  //default:true ,是否可拖动大小
                    hide: {effect: 'explode', duration: 2000, easing: 'swing'},  // 展现和关闭animate
                    show: 2000,// 展现和关闭animate
                    stack: true,     //default:true有多个dialog时，在点击对应的dialog将其自动展示在最前端。
                    modal: true,      //default:false 模态框，会出现遮罩层,
                    beforeClose: function(event, ui){
                        console.log('option:我被beforeClose关闭了');
                    },
                    close: function(event, ui){
                        console.log('option:我被close了');
                    },
                    resize: function(event, ui){
                        console.log('option:我被resize了');
                    },
                    resizeStart: function(event, ui){
                        console.log('option:我被resizeStart了');
                    },
                    resizeStop: function(event, ui){
                        console.log('option:我被resizeStop了');
                    },
                    drag: function(event, ui){
                        console.log('option:我被drag了');
                    },
                    dragStart: function(event, ui){
                        console.log('option:我被dragStart了');
                    },
                    dragStop: function(event, ui){
                        console.log('option:我被dragStop了');
                    },
                    focus: function(event, ui){
                        console.log('option:我被focus了');
                    },
                    open: function(event, ui){
                        console.log('option:我被open了');
                    },
                    create: function(event, ui){
                        console.log('option:我被create了');
                    }
                });
                // method.
                //$dialog.dialog('close');   //关闭
                //$dialog.dialog('destroy'); //销毁
                //$dialog.dialog('disable'); //禁用
                //$dialog.dialog('enable');  //可用
                //$dialog.dialog('isOpen');  //是否已打开
                //$dialog.dialog('moveToTop');//移动至最顶端
                //$dialog.dialog('open');     //打开
                //$dialog.dialog('option');   //获取全部选项，也可设置选项
                //$dialog.dialog('widget');   //获取部件
                
                // event事件(在option中用驼峰表示，在单独加入中用dialog+ event名小写) 这种写了没起做用
                /*$dialog.dialog('dialogclose',function(event, ui){
                    debugger;
                    console.log('我被关闭了')
                    });*/
                    
                    
            var ObjValid = {
                    isRequire : function(ele){ //必须项
                        ele = $(ele);
                        if(!ele){return true};
                        if(!$.trim(ele.val())){
                            ele.addClass('bg_red');
                            tips.text('内容不能为空');
                            return false;
                        }
                        return true;
                    },
                    checkLength : function(ele,minlength, maxlength){  //长度判断
                        ele = $(ele);
                        if(!ele){return true};
                        var length = $.trim(ele.val());
                        if(minlength && !Number.isInteger(minlength)){
                            console.error('minlength应为数字类型或者为空');
                            return false;
                        }
                        if(maxlength && !Number.isInteger(maxlength)){
                            console.error('maxlength应为数字类型或者为空');
                            return false;
                        }
                        if(minlength && minlength > length){
                            ele.addClass('bg_red');
                            return false;
                        }
                        if(maxlength && maxlength < length){
                            ele.addClass('bg_red');
                            return false;
                        }
                        return true;
                    },
                    checkEmail : function(ele){   //邮箱判断
                        ele = $(ele);
                        if(!ele){return true};
                        var expReg = /^(.+)@(.+)[com|cn]$/;
                        if(!expReg.test(ele.val())){
                            ele.addClass('bg_red');
                            return false;
                        };
                        return true;
                    }
                };
                    
                    
                
                var checkEleFn = function(_formEle){
                    _formEle.removeClass('bg_red');
                    var valid = true;
                    $.each(_formEle, function(index, ele){
                        if(ele.required){
                            valid = valid && ObjValid.isRequire(ele);
                        }
                        if(ele.minLength || ele.maxLength){
                            valid = valid && ObjValid.checkLength(ele, ele.minLength, ele.maxLength);
                        }
                        if($(ele).is('[type=email]')){
                            valid = valid && ObjValid.checkEmail(ele);
                        }
                    });
                    
                }

                
                var adduserFn = function(){
                    var user = $('input[name=user]');
                    var pwd = $('input[name=pwd]');
                    var email = $('input[name=email]');
                    var formEle = $([]).add(user).add(pwd).add(email);
                    checkEleFn(formEle);
                }


                var $formDialog = $('#formDialog').dialog({
                    autoOpen:false,
                    title:'formDialog',
                    buttons:{'关闭': function(){$(this).dialog('close');},
                        '肯定': function(){
                            adduserFn();
                        }}
                });
                
                /**
                 * 打开对话框
                 */
                $("#openDialogBtn").bind("click", function(){
                    $formDialog.dialog('open');
                });
            });
            
        </script>
    </body>
</html>

Dialog

Accordionajax

目前尚未在实际中使用，用的时候再填补。api