网站建设规划大纲,编写网站程序,网站开发人员注意事项,佛山市网络seo推广公司“你值得拥有”专栏系列上新啦#xff0c;今日推出“手写前端插件”项目#xff0c;作为一个前端中高级工程师#xff0c;手写前端树形菜单插件、弹出层插件、日历插件、分页插件、选项卡插件、进度条插件等是必备的技能#xff0c;让你的前端技术百尺竿头更进一步#xf…“你值得拥有”专栏系列上新啦今日推出“手写前端插件”项目作为一个前端中高级工程师手写前端树形菜单插件、弹出层插件、日历插件、分页插件、选项卡插件、进度条插件等是必备的技能让你的前端技术百尺竿头更进一步在三大框架中垂直聚焦自己的亮点代码结构cool-module资源引进引进css样式文件分页样式 link relstylesheet typetext/css hrefcss/css/tz-page.css/link树形菜单样式 link relstylesheet typetext/css hreftree/tm_tree.css/linkjs组件库所有的样式 link relstylesheet typetext/css hrefcss/css/sg.css/link引进js文件引入jQuery依赖script typetext/javascript srcjs/jquery-1.11.2.min.js/script树形菜单js script typetext/javascript srctree/tm_tree.js/scriptjs组件库工具类 script typetext/javascript srcjs/sgutil.js/scriptjs组件库 script typetext/javascript srcjs/sg.js/script分页js script typetext/javascript srcjs/tz_page.js/script日历 script typetext/javascript srcjs/date/WdatePicker.js/script实际效果日历 input typetext idsearchStartTime classWdate οnclickshowdate1()/classWdate 为必填项具体操作看mydate97操作文档这里做了一个组件库集成 function showdate1(){ WdatePicker({dateFmt:yyyy-MM-dd HH:mm:ss}); }日历图形界面树形菜单,添加右键菜单效果// 引入元素
div idpermissiontree// js使用
$(#permissiontree).tmTree({})var trees {root: [{name: 所有,opid: 1,pid: 1,url: javascript:void(0);}, {name: 审核,opid: 10,pid: 10,url: javascript:void(0);}, {name: 查看,opid: 11,pid: 11,url: javascript:void(0);}, {name: 工具,opid: 12,pid: 12,url: javascript:void(0);}, {name: 模板管理,opid: 13,pid: 13,url: javascript:void(0);}],children: {1: [{name: 禁用,opid: 2,pid: 2,url: javascript:void(0);}, {name: 搜索,opid: 5,pid: 5,url: javascript:void(0);}, {name: 添加,opid: 6,pid: 6,url: javascript:void(0);}, {name: 置顶,opid: 7,pid: 7,url: javascript:void(0);}, {name: 评论,opid: 8,pid: 8,url: javascript:void(0);}, {name: 下单,opid: 9,pid: 9,url: javascript:void(0);}],2: [{name: yy7y,opid: 20,pid: 20,url: javascript:void(0);}]}
}// 初始化
$(#permissiontree).tmTree({rightMenu:true,root:trees.root,children:trees.children,type:checkbox,callback:function($opTarget, params, model){var opid params.opid;//选中节点的idif(model add){}if(model edit){}if(model delete){}if(model cancel){}}});树形菜单图形界面分页div classcpage$(.cpage).tzPage(19, {num_edge_entries : 1, //边缘页数num_display_entries :4, //主体页数num_edge_entries:5,current_page:0,showGo:true,showSelect:true,items_per_page : 10, //每页显示X项prev_text : 前一页,next_text : 后一页,callback : function(pageNo,psize){//回调函数}
});分页图形界面弹出层iframe$.tzIframe({width:320,height:400,title:用户分配角色,ghost:false,content:iframe.html,callback:function(iframe,$dialog,opts){if(iframe){console.log(hello);}}});iframe图形界面confirm$.tzConfirm({width:450,height:430,title:新增客户信息,ghost:false, // 拖动是否产生镜像icon:,content:ul classpredata li aspan客户编码/spaninput idcli_code //a /li li aspan客户名称/spaninput idcli_name //a /li li aspan联系人/spaninput idcli_people //a /li li aspan联系电话/spaninput idcli_telephone //a /li li aspan传真/spaninput idcli_fax //a /li li aspan地址/spaninput idcli_address //a /li li aspan公司/spaninput idcli_company //a /li li aspan备注/spaninput idcli_description //a /li /ul,callback:function(ok, $dialog, opts){if(ok){if(isEmpty($(#cli_code).val())){$(#cli_code).tips({msg: 客户编码不能为空,side: 2,color: #fff,bg: #f00,time: 3,x: 0})} else {$dialog.next().remove();tzUtil.animates($dialog,opts.animate);}}}
});confirm图形界面alert$.tzAlert({title:hello,content:welcome to my page,callback:function(ok, $dialog, opts) {if(ok) {$dialog.next().remove();tzUtil.animates($dialog,opts.animate);}
}});alert图形界面dialog$.ymDialog({ //删除提示title : 删除提示,contents : 确定要删除文件吗,success : function(){ //确定删除$(#test).show().removeClass(animated bounceOutUp).addClass(animated bounceInUp);}
});dialog图形界面提示框top-tip $.topTips({content:文件删除成功,controls : warn,timer:2
});/*** 友情提示组件从html的顶部出现* 使用方式参数说明content提示的内容controls提示样式错误提示:err,警告提示:warn,成功提示ok,等待提示loadingtimer:显示和消失总体时间* param $*/top-tip图形界面center-tip loading(content, timer) loading(演示开始)center-tip图形界面ele-tip /** 元素提示框 $(selector).tips({ msg:your messages!, //提示消息 必填 side:1, //提示窗显示位置 1234 分别代表 上右下左 默认为1上 可选 color:#FFF, //提示文字色 默认为白色 可选 bg:#F00,//提示窗背景色 默认为红色 可选 time:3,//自动关闭时间 默认3秒 设置0则不自动关闭 可选 x:0,//纵向偏移 正数向右偏移 负数向左偏移 默认为0 可选数值 y:0,//横向偏移 正数向下偏移 负数向上偏移 默认为0 可选 数值 }) */ele-tip图形界面滑块 div classslider $(.slider).tzSlider({horizontal:false}); $(.slider2).tzSlider({horizontal:true});滑块图形界面tab页面div classtab $(.tab).tzTab({ index:3, //默认选中第几个 tabDatas:[ {title:11111,content:img srcimages/01.jpg idimg,url:www.baidu.com}, {title:22222,content:bbbbb,url:user.action}, {title:22222,content:ddddd}, {title:33333,content:rrrrr} ] });tab图形界面相关源码9.99元——打赏后评论或者备注留言例如”已支持your_emailxxx.commodule”一年365天希望各位看官达人多多支持打赏后将及时发送源码
