基于 HTML 的界面原型库 Shireframe

GPLv2
JavaScript
跨平台
2015-04-13
红薯

Shireframe 可通过 HTML 实现界面原型的绘制。基于 AngularJS 和 jQuery 驱动,使用 RequireJS 进行模块加载,使用 Bootstrap 进行展示

kitter

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js"></script>
        <title>Doodle</title>
    </head>
    <body>
        <browser-chrome>
            <div class="container-fluid">
                <div class="text-right vertical-margin">
                    <a>~Me</a>
                    <a>Mail</a>
                    <a>Pictures</a>
                    <glyphicon th></glyphicon>
                    <glyphicon user></glyphicon>
                </div>
                <div class="vertical-margin">
                    <row>
                        <col-6 col-offset-3>
                            <h1 class="text-title text-center"></h1>
                            <box class="width-100 vertical-margin">|</box>
                        </col-6>
                    </row>
                    <row>
                        <col-3 col-offset-3>
                            <button class="btn btn-default width-100">Doodle search</button>
                        </col-3>
                        <col-3>
                            <button class="btn btn-default width-100">I'm feeling doodley</button>
                        </col-3>
                    </row>
                </div>
                <footer class="vertical-margin">
                    &copy; <text-url></text-url> 2015
                </footer>
            </div>
        </browser-chrome>
    </body>
</html>


加载中

评论(1)

Edita
Edita
国产Mockplus做好原型图可以直接导出html了,预览很方便。

暂无资讯

暂无问答

OSChina 技术周刊第三十期 —— IT 公司开源软件整理计划

每周技术抢先看,总有你想要的! 移动开发 【翻译】Intel® INDE for Google Android Studio 【软件】移动应用开发框架 Samurai-Native 【博客】學習 React.js:用 Node 和 React.js 創建一個...

2015/04/19 19:37
88
0
【书单】JS书单汇总:怀念2013

  从2011年11月到现在,大抵接近两年的时间。对JS的了解,不敢说有多深,不过大都得益于下列书籍。大部分看过,小部分只是翻翻。2014年打算把这些书挑一些出来回顾回顾,然后研究下新的东西...

2014/01/24 00:37
437
2
《深入理解JavaScript系列》

《深入理解JavaScript系列》系列技术文章整理收藏

2015/06/23 15:08
35
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

2012/04/06 11:37
3.2K
7
解决一个html 或jsp 引入多个不同版本的jquery 解决方案

解决一个html 或jsp 引入多个不同版本的jquery 解决方案

2017/11/02 12:25
23
0
分享一些前端开发中最常用的JS代码片段

逛社区时看到的文章,我修改调整了内容,如果大家觉得也有帮助 可以收藏下~ HTML5 DOM 选择器 javascript 代码 JavaScript运行复制全屏 1 // querySelector() 返回匹配到的第一个元素 2 var ...

02/27 21:21
3
0
a标签中调用javascript方法的几种方法:

我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的...

2013/12/01 00:20
56
0
asp.net中调用javascript自定义函数的方法(包括引入JavaScript文件)总结

通常javascript代码可以与HTML标签一起直接放在前端页面中,但如果JS代码多的话一方面不利于维护,另一方面也对搜索引擎不友好,因为页面因此而变得臃肿;所以一般有良好开发习惯的程序员都会...

2012/11/04 21:28
937
0
JavaScript八张思维导图

目录 JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实践 不知不觉做前端已经五年多了,无论是从最初的jQuery还是现在火热的Angular,Vue,React等前端...

今天 12:54
0
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部