正在载入中....
关于作者
邬畏畏
WUI
包含 对话框、表格、标签页、提示框、表单验证、脚本样式动态载入、图表等功能。
特点:
1.每个组件是一个js文件,根据web应用导入相应的js
2.每个组件呈现后会有适合的class,用户可以根据组件的class
自定义外观样式.
3.组件支持requirejs
本站UI控件开发于不同的时间,难免有不足的地方。^_^
本站还强烈推荐 前端模板引擎,轻巧灵活,居家开发必备
网址:www.github.com/flybirdsoft
wTab组件
wTab组件
wTab组件,小巧轻便样式简单灵活,适合于所有的web系统,它的功能是创建具有多个标签的可切换的页签。
使用简单,每个页签有click事件处理接口。
查看详情
wIFrameTab组件
wIFrameTab组件
wIFrameTab组件,小巧轻便样式简单灵活,适合于所有的web系统,它的功能是创建具有多个标签的可切换的页签。
使用简单,每个页签有click事件处理接口。
注意,wIFrameTab没有实例化对象,要想在页面上生成多个标签页控件请使用wTab
查看详情
wScrollToTop组件
wScrollToTop组件
wScrollToTop组件,小巧轻便样式简单灵活,适合于所有的web系统,它的功能是生成可以回到当页顶部的元素。
使用简单
功能能活,样式外观根据不同网页的需要用户自己定义样或图片,显示位置也可以自定义。
查看详情
wForm组件
wForm组件
wForm组件,小巧轻便样式简单灵活,适合于所有的web系统,可以验证为空、数字、电话号码、手机号和金额。
使用起来简单方便
验证提示信息可以自定义,验证提示可以设置在文本框的里面和外面。
查看详情
cssjsLoader
cssjsLoader
cssjsLoader功能是动态载入样式和脚本,也可以配置好JSON,方便批量读取。
使用起来简单方便
查看详情
wTip组件
wTip组件
Tip组件功能是在指定的DOM元素附近生成自定义提示信息,当鼠标移动到此元素上显示提示。
提示信息可以定义自己的css样式和位置。
查看详情
wList组件(表格)
wList组件
wList组件用于生成表格及数据呈现等功能。
有如下功能:
1.分页功能;2.checkbox功能;3.生成自动序号功能;4.自定义列功能;5.隐藏某列功能等。
查看详情
wStep组件
wStep组件
wStep组件用于生成步骤处理和操作功能。
有如下功能:
1.可以初始化操作步骤;2.可以自定义上一步和下一步;3.根据用户需要可以隐藏上一步货下一步;
查看详情
wDialog组件
wDialog组件
wDialog组件用于生成通用对话框。
使用简单,松散选择
可以根据开发者的需求设置对话框是否可移动,设置是否有标题栏,遮罩层于对话框是分开的,遮罩层颜色和透明度可以自定义
查看详情
wTree组件
wTree组件
wTree组件用于生成树。
使用简单,功能灵活
特点:样式灵活,有丰富的事件接口,支持鼠标拖动节点,有右键菜单功能,可以动态添加菜单项。
查看详情
wUpDown组件
wUpDown组件
wUpDow用于生成可增减的数字控件。
使用简单,功能灵活
开发者可以自定义组件的样式。
查看详情
wSVGCircle组件
wSVGCircle组件
wSVGCircle用于生环形图表的控件,使用简单,功能灵活。
1.可以指定是否使用动画效果;
2.可以设置环形图表的颜色;
3.可以设置图表显示的标签信息和样式。
查看详情
wSelect组件
wSelect组件
wSelect用于创建下拉列表框控件,使用简单,功能灵活。
1.具有浏览器表单下拉列表框的功能;
2.可以根据UI需求修改类样式;
查看详情
wSlidePaper组件(页面滚屏组件)
wSlidePaper组件(页面滚屏组件)
wSlidePaper组件(页面滚屏组件)用于页面鼠标滚屏。
查看详情
wScrollBar组件
wScrollBar组件
wScrollBar组件用于生成滚动条。
单击下载
wGate组件
wGate组件
wGate组件是用于手机端滑动页面
功能:可以将DOM元素从左侧、顶部、右侧、底部滑入或划出。
单击下载
wPress组件
wPress组件
wPress组件是用于手机端长按键处理
功能:使用wPress后,在手机端可以长按页面元素,响应长按页面DOM元素的处理。
单击下载

未完待续!

首页
博客
导航
电子地图
Copyright © 2013 - 2015 翱翔软件 All Rights Reserved.
代码示例:
        var tab = new wTab();
        tab.addTab("tab页签一","a.html");
        tab.addTab("tab页签二","tab2");
        tab.addTab("tab页签二","tab3");
        tab.isdivtab=true;
        tab.click=function(index){
        	alert("您点击了第"+index+"个标签页");
        }
        tab.initTab("parentId"); 
        
代码示例:
		wIFrameTab.autoHeight=true;
		wIFrameTab.addTab("tab页签一","a.html");
		wIFrameTab.addTab("tab页签二","b.html");
		wIFrameTab.addTab("tab页签二","tab3");
		wIFrameTab.initTab("p1");
		function fun(){
			wIFrameTab.addNewTab("p1","新页签","http://x.x.com");
		}

		
代码示例:
		wScrollToTop.init(
        	{fade:true,
            autoHide:true,
            top:"80%",
            right:"30px",
            content:"<div class='zdyScrollToTop'>▲</div>"
            }
        );
        
        请看页面右下角
		
    /*
    语法:需要在input标签元素中加入自定义属性
    例如:<input type="text" name="w" value="42323" empty="{empty:'empty'}"/>
    表示非空验证
    自定义属性有:empty,mobile,datecomp,mumber,cash
    注意:如果使用自定义提示信息,语法:number="caption:请输入数字"
    */
    wForm.tip="必填";//必填提示信息设置
    wForm.id="#f";   //表单ID
    wForm.tipType="tip";//或alert
    function fun()
    {
        if(wForm.validate("showtip")) //必填语法
        {
            alert("提交成功,提交给XX网站"); return true;
        }
        else
        {
            alert("验证未通过");return false;
        }
    }
    <form action="http://www.baidu.com" id="f" onsubmit="return fun()">
        
代码示例:
        wLoader.config.path="";
        wLoader.config.file="config.js";
        /*引入当前config.js文件,此文件是配置文件,配置要载入的样式和js文件*/
        wLoader.loadConfig();    
        //wLoader.config.path="css";
        //wLoader.loadCss(["style.css","style2.css"]);
        //wLoader.config.path="jstest";
        //wLoader.loadJs(["js1.js","js2.js"]);
        //wLoader.delScript("scr1");  
        function fun(){
            list.show();/* 此方法在 jstest/js1.js 里 */
        }
        wLoader.$(function(){
            list.show();/* 此方法在 jstest/js1.js 里 */
        });
        wLoader.$(function(){
            $(function(){
            $("#test").html("点击这里执行事件");
            });
        });
            
代码示例:
在DOM元素上加入tip属性:
<div class="op" tip="{diffX:10,diffY:-5,pos:'right',text:'<div></div>查看统计图'}"></div>

脚本:
wTip.init({className:"Tip"});
        
代码示例:
var options1={
		keepcheck:true,
		haveNo:true,
		pagesize:10,
		checkbox:true,
		autowidth:true,
		url:'data.json',
		keyname:'code',
		showkey:true,
		headerheight:20,
		rowheight:50,
		optype:'dialog',
		success:function(){
			alert("加载完毕!");
		}
		op:{
			buttons:[
				{
					text:'edit',
					callback:function(obj){
						alert(obj.key);
                        alert(obj.value);
                        alert(obj.JSON.rows[obj.rowIndex].addr);
						},
					formatter:function(obj){
						return obj.JSON.rows[obj.rowIndex].name;
					}
				},
				{
					text:'delete',
					callback:function(obj){
						alert(obj.key);
                        alert(obj.value);
                        alert(obj.JSON.rows[obj.rowIndex].addr);
						}			
				}
			],
			caption:'操作',width:100},
		columns:[
			{
            	caption:'编号',name:'code',width:170,
                href:'http://www.cnblogs.com/wsoft',
            	target:'_blank',
				formatter:function(obj){
					return ''+obj.value+'';
				}
			},
			{caption:'业务组名称',name:'name',width:100},
			{caption:'可用性',name:'addr',callback:function(object){alert(pk.key);}},
			{caption:'健康状况',name:'col4',callback:function(object){alert(pk.key);},
				formatter:function(obj){
					return ''+obj.value+'';
				}
			}
		]
}
var list1 = new wList("#p",options1);
list1.loadData(data);
            
代码示例:
var tab = new wStep();
tab.onNext = function(){
	//tab.index是第几步的索引
	if(tab.index==1)
	{
		if(true)
		{
			tab.pass=ture;/*tab.pass=true表示通过*/
		}
		else
		{
			tab.pass=false;/*未通过*/
            /*tab.pass=false,时用户单击下一步,不会转到下一步处理界面*/
		}
	}
	if(tab.index==2)
	{
		$(".wStepNext").hide();
	}
};
tab.onPrev = function(){
	$(".wStepNext").show();
}
tab.addTab("类型选择","step-1");
tab.addTab("基础配置","step-2");
tab.addTab("代码上传","step-3");
tab.addTab("服务绑定","step-4");
tab.autoHeight=true;
tab.prevText="";
tab.nextText="";
tab.diff=50;
tab.diff2=180;
tab.pass=true;
tab.initTab("myStep");
        
代码示例:
        options={id:'dlg_wTab',hasBar:true,barOptions:{title:"wTab组件"},
                position:'fixed',type:'center',contentId:'wTab',
                className:'dialog',
                width:700,height:370,isMove:false
                };
        overLayer.bgColor='#777'; //遮罩层颜色
        overLayer.opacity=40;     //遮罩层透明度
        var dlg = new wDialog(options);
        dlg.show();
        
        //注意:不能多次new wDialog(); ,要在页面加载后执行一次
        //显示隐藏通过dlg.show();和dlg.hide();实现
        
代码示例:
var options = {
	indent:20,
	allowDrag:true,
	event:{
			toggle:"none",
			onClick:function(obj){
				//alert(obj.text);
			},
			onLevelClick:function(obj){
				//alert(obj.target.nodeName);
			},
			onDrop:function(obj){
            	//your code
			},
			onMenuClick:function(obj){
				if(obj.menuText=="节点上编辑")
				{//your cocde
				}
				if(obj.menuText=="编辑")
				{//your cocde
				}
				else if(obj.menuText=="删除")
				{//your cocde
				}
				else if(obj.menuText=="添加")
				{//your cocde
				}
			},
			onAjaxLoad:function(obj){
				//alert("这里需要AJAX交互");
				asyncData.parentId = obj.parentId;
				this.asyncLoadData(asyncData);
			}
		},
	menu:{
		items:[
        {id:"m1",text:"节点上编辑"},
        {id:"m2",text:"编辑"},
        {id:"m3",text:"添加"},
        {id:"m4",text:"删除"}
        ]
	},
	expand:true,
	mask:{opacity:0.6,bgColor:"#999",text:"数据正在载入中..."}
}
var tree = new wTree("#mytree",options);
tree.loadData(data);
        
代码示例:
var w = new wUpDown("#content",
				{
				min:0,
				max:20,
				value:2,
				height:48,
				autoHeight:true,
				readOnly:true,
				step:1,
				upText:" ",
				downText:" "
				}			
			);
        
代码示例:
var circle1 = new wSVGCircle("#circle1",
	{
		id:"depCircle1",
		percent:"80%",
		arcColor:'#fe8a78',
		bgColor:'#ddd',
		isAnimate:true,
		label:{
			labels:[
				{
					text:"80%",
					color:"#fe8a78",
					css:";font-size:22px;font-weight:bold",
					offsetY:10
				}
			]
		}
	});
        
代码示例:
var options={
	name:"program",
	width:150,
	height:30,
	selectIndex:0,
	items:[
		{key:"0",value:"Microsoft .net framework"},
		{key:"1",value:"javaScript"},
		{key:"2",value:"JAVA"},
		{key:"3",value:"PHP"},
		{key:"4",value:"Phython"}
	]
};
var select = new wSelect("#select",options);
        
代码示例:
            wSlidePaper.init({
                id:"content",
                items:[
                    "paper1",
                    "paper2",
                ],
                onload  :function(){
                },
                onscroll:function(object){
                    //alert(object.target.id);
                    alert(object.index);
                }
            });
        
喜爱自己从事的职业,有多年的桌面应用系统开发经验及web开发经验,现从事web前端开发、架构及设计。我在工作中应用而生编写了几个用于前端的小组件,希望能给前端后端开发工程师们带来方便。