UI练习

最新推荐文章于 2024-06-10 20:07:40 发布

black__zzc

最新推荐文章于 2024-06-10 20:07:40 发布

阅读量281

点赞数

本文链接：https://blog.csdn.net/black__zzc/article/details/51025353

版权

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。

利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

Eg:

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="jquery-ui.css">
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui.min.js"></script>
</head>
<body>
<input type="button" value="我是按钮">
<br/><br/>
<a href="#" οnclick="return false">我是a标签</a>
<br/><br/>
<span id="pan1">我是span元素</span>
<br/><br/>
<input type="text" id="qi" title="日期选择"/>
<br/><br/>
<input type="button" value="弹出" οnclick="test1( )">
<br/><br/>
<div id="div1" style="display: none">我是弹出的信息内容</div>
<br/><br/>
<input type="text" id="mytext"/>

//autocomplete：自动完成。根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表（source：[...]）中选择

    $("#mytext").autocomplete({
        source:["吃饭","打游戏","吃肉","吃素","打豆豆"]
    });
    function test1( ){
        $("#div1").dialog({     //dialog：对话框
            modal:true ,     // 遮罩
            show:{
                effect : " blind " ,      //遮罩层上的弹出框的出现效果
                duration:1000        //等待时间1000毫秒
            },
            hide:{
                effect : " explode " ,      //遮罩层上的弹出框的消失效果
                duration:1000             //等待时间1000毫秒
            }
        })
    }
    $("#pan1,a").button( );
    $("#qi").datepicker({
        dateFormat : " yy年mm月dd日 " ,                          //日期格式化处理
        changeMonth : true ,                                    //让月份可以下拉选择
        changeYear : true ,                                        //让年份可以下拉选择，默认为当前选择年份前后10年
      //完整月份名称替换为中文
        monthNames : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      //下拉选择的月份缩写替换为中文

monthNamesShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

//星期几提示替换为中文

        dayNamesMin : ["日","一","二","三","四","五","六"],
      //星期几浮动提示替换为中文
        dayNames : ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
        maxDate : " ", //设置能够选择的最大日期，如果为当前日期写“0”，同时可以+1也可以-1（单位w/m/y）
        minDate : " " //设置能够选择的最小日期
    });
    $("#ui-datepicker-div").css("font-size","10px") ;                    //将jQuery的日期选择的文字变小
    $("#txtdate").tooltip( ) ;                                    //tooltip：提示文本

</script>

</body>

</html>

网址：www.css88.com。查看jquery ui的中文帮助手册