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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。