• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

    turtle-online: 致力于打造好用的PC前端架构,组件+API,快速搭建前端开发。 ...

    原作者: [db:作者] 来自: 网络 收藏 邀请

    开源软件名称:

    turtle-online

    开源软件地址:

    https://gitee.com/yinluhui/turtle-online

    开源软件介绍:

    #turtle-onlineTurtle online 是Turtle框架的PC前端架构,包括组件和API两大部分,可以快速的搭建PC前端开发环境。组件包括日历、分页、图片轮播/图片浏览、各类提示弹框/自定义弹层、气泡提示等。API包括常用JS方法封装(cookie操作、ajax封装、日期处理、浏览器判断、当前位置获取页面跳转、其他常用方法等)、基于Backbone.View/Require.text.js的框架、前端模板。重要说明:Turtle online组件部分使用了第三方js库 layerUI、poshytip。

    ##演示Turtle Online演示

    ##一、使用方法1. 把build目录放到你项目中;2. 在页面中引入Turtle.min.css和../build/Turtle.min.js;3. 然后就可以在你的js中使用了,实例如下:

    	// 语法参考 requireJS、BackboneJs	// cPageView:是Turtle封装的Backbone.View.js,text!是在turtle中已经引入的require.text.js。	define(['cPageView','text!views/temple/temptest.html'],function(cPageView,temptest) {		var View = cPageView.extend({			events:{				'click #cpageviewTest1':'clicktest1',				'click #templateA':'clicktest2'			},			initialize: function () {				console.log('initialize');				this.$el.find('#cpageviewTest3').html('默认值被改变');				this.on('initpage',function(){					console.log('initpage');				});				this.trigger('initpage');			},			clicktest1:function(e){				this.$el.find('#cpageviewTest2').html('赋值成功!'+new Date())			},			clicktest2:function(){				$('#templateTest').html(_.template(temptest)({name:'Alec yin'}));			}		})		return new View();	});4. API的使用,全部都是在Turtle/turtle对象中,直接【Turtle./turtle.】就可以了。以上四步你就可以使用Turtle online中的方法了,如果你没有使用requireJs的话,API和组件也是可以直接使用的。

    ##二、运行Turtle online1. 下载Turtle online项目,直接点击index.html即可查看。(此时有js报错,因为使用了require.js,需要提供项目路径,不影响查看非cPageView实例以外的实例。)

    如果你要看cPageView的实例代码,请继续操作:2. 把turtle online代码部署到服务器上;3. 修改index.html中的代码【baseUrl: "http://localhost/TurtleOnline",】改成你的部署路径;4. 再次运行index.html即可。

    ##三、二次开发说明如果现有的Turtle online无法满足你的需求,你可以在现有代码的基础上定制型开发(注意:请勿提交至代码库,仅自己使用,谢谢!)。开发步骤:1. 修改代码;2. 如果新增或者删除了文件,需要同步修改gulp配置文件gulpfile.js;3. 安装node_modules依赖包;4. 执行gulp build命令,合并压缩项目至build目录。5. 把build目录下文件拷贝你项目中就可以直接使用了。

    ##四、项目架构说明项目架构说明

    ##五、Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图Turtle Online框架运行图

    ##打赏支持支付宝微信


    鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    热门推荐
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap