AmazeUI，一个移动优先的模块化前端框架资源-CSDN文库

共656个文件

md：238个

less：167个

js：86个

版权申诉

JavaScript

109 浏览量 2024-02-06 23:04:48 上传评论收藏 2.26MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Amaze UI，一个移动优先的模块化前端框架（656个子文件）

amazeui.flat.css 325KB

amazeui.css 324KB

amazeui.flat.min.css 250KB

amazeui.min.css 249KB

admin.css 5KB

app.css 23B

.editorconfig 214B

editorconfig 214B

.editorconfig 167B

fontawesome-webfont.eot 75KB

.eslintrc 2KB

.gitattributes 12B

.gitignore 475B

.gitignore 30B

.gitkeep 13B

list_news.hbs 9KB

menu.hbs 3KB

index.hbs 3KB

footer.hbs 3KB

pagination.hbs 2KB

header.hbs 2KB

figure.hbs 1KB

intro.hbs 1KB

gallery.hbs 1KB

navbar.hbs 952B

accordion.hbs 857B

tabs.hbs 771B

titlebar.hbs 747B

layout4.hbs 733B

gotop.hbs 724B

slider.hbs 710B

layout3.hbs 602B

wechatpay.hbs 556B

map.hbs 531B

duoshuo.hbs 519B

paragraph.hbs 497B

layout2.hbs 479B

divider.hbs 363B

mechat.hbs 357B

container.hbs 268B

tpl.hbs 260B

blank.hbs 154B

error.hbs 80B

admin-table.html 23KB

admin-index.html 18KB

admin-form.html 12KB

widget.basic.html 12KB

widget.html 11KB

admin-log.html 10KB

admin-gallery.html 10KB

admin-user.html 10KB

blog.html 10KB

non-responsive.html 10KB

sidebar.html 9KB

landing.html 9KB

index.html 8KB

admin-help.html 7KB

iscroll.html 6KB

admin-404.html 6KB

amazeui.js 459KB

amazeui.min.js 206KB

amazeui.ie8polyfill.js 111KB

0.es5-shim.js 75KB

util.hammer.js 67KB

util.qrcode.js 59KB

ui.flexslider.js 53KB

amazeui.ie8polyfill.min.js 35KB

amazeui.widgets.helper.js 34KB

amazeui.hbs.partials.js 33KB

amazeui.widgets.helper.min.js 33KB

ui.iscroll-lite.js 27KB

ui.add2home.js 22KB

1.es5-sham.js 20KB

ui.pinchzoom.js 20KB

ui.validator.js 19KB

ui.datepicker.js 18KB

core.js 16KB

gulpfile.js 12KB

ui.selected.js 12KB

ui.progress.js 11KB

ui.pureview.js 11KB

ui.share.js 9KB

rem.min.js 9KB

index.js 8KB

ui.modal.js 8KB

ui.popover.js 6KB

touch.js 6KB

ui.tabs.js 6KB

ui.dropdown.js 5KB

ui.sticky.js 5KB

ui.offcanvas.js 5KB

respond.min.js 4KB

ui.collapse.js 4KB

navbar.js 4KB

customizer.js 4KB

menu.js 4KB

map.js 4KB

共 656 条

# Gallery 图片画廊 --- 图片画廊组件，用于展示图片为主体的内容。 **演示图标版权归[微软 Bing](http://www.bing.com) 所有。** ## 使用方法 ### 直接使用 - 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（[点此下载](/getting-started)） `<body>` 区域； - 将示例代码中的内容替换为自己的内容。 ### 使用 Handlebars 本组件 Handlebars partial 名称为 `gallery`，使用细节参照[折叠面板组件](/widgets/accordion)。 ### 云适配 WebIDE - 将组件拖入编辑界面； - 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。 ```javascript var data = [ { "img": "", // 图片地址 "link": "", // 填写点击图片弹出放大时的图片路径 "title": "", // 图片标题 "desc": "" // 附加信息，支持DOM，为高级定制提供DOM接口 } ]; return data; ``` ## 指定缩略图基于节省流量考虑，可以指定缩略图，用户点击放大的时候再显示大图。 ### 使用 `data-rel` 将大图放在 `<img>` 的 `data-rel` 属性上。 `````html <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview: 1}"> <li> <div class="am-gallery-item"> <img src="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg" alt="远方有一个地方那里种有我们的梦想" data-rel="https://farm4.staticflickr.com/3835/15329524682_554d4c0886_k.jpg"/> <h3 class="am-gallery-title">远方有一个地方那里种有我们的梦想</h3> <div class="am-gallery-desc">2375-09-26</div> </div> </li> <li> <div class="am-gallery-item"> <img src="https://farm3.staticflickr.com/2941/15346557971_dec5c9ac36_z.jpg" alt="某天也许会相遇相遇在这个好地方" data-rel="https://farm3.staticflickr.com/2941/15346557971_d8f3d52978_k.jpg"/> <h3 class="am-gallery-title">某天也许会相遇相遇在这个好地方</h3> <div class="am-gallery-desc">2375-09-26</div> </div> </li> </ul> ````` ```html <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview: 1}"> <li> <div class="am-gallery-item"> <img src="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg" alt="远方有一个地方那里种有我们的梦想" data-rel="https://farm4.staticflickr.com/3835/15329524682_554d4c0886_k.jpg"/> <h3 class="am-gallery-title">远方有一个地方那里种有我们的梦想</h3> <div class="am-gallery-desc">2375-09-26</div> </div> </li> <li> <div class="am-gallery-item"> <img src="https://farm3.staticflickr.com/2941/15346557971_dec5c9ac36_z.jpg" alt="某天也许会相遇相遇在这个好地方" data-rel="https://farm3.staticflickr.com/2941/15346557971_d8f3d52978_k.jpg"/> <h3 class="am-gallery-title">某天也许会相遇相遇在这个好地方</h3> <div class="am-gallery-desc">2375-09-26</div> </div> </li> </ul> ``` ### 使用链接设置 `target`: `data-am-gallery="{pureview:{target: 'a'}}"`。从可访性的角度而言，这种方式更好一些：用户再禁用 JavaScript 以后仍然可以打开链接查看大图。 `````html <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview:{target: 'a'}}"> <li> <div class="am-gallery-item"> <a href="https://farm4.staticflickr.com/3835/15329524682_554d4c0886_k.jpg" title="远方有一个地方那里种有我们的梦想"><img src="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg" alt="远方有一个地方那里种有我们的梦想"/> <h3 class="am-gallery-title">远方有一个地方那里种有我们的梦想</h3> <div class="am-gallery-desc">2375-09-26</div></a> </div> </li> <li> <div class="am-gallery-item"> <a href="https://farm3.staticflickr.com/2941/15346557971_d8f3d52978_k.jpg" title="某天也许会相遇相遇在这个好地方"><img src="https://farm3.staticflickr.com/2941/15346557971_dec5c9ac36_z.jpg" alt="某天也许会相遇相遇在这个好地方"/> <h3 class="am-gallery-title">某天也许会相遇相遇在这个好地方</h3> <div class="am-gallery-desc">2375-09-26</div></a> </div> </li> </ul> ````` ```html <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview:{target: 'a'}}"> <li> <div class="am-gallery-item"> <a href="https://farm4.staticflickr.com/3835/15329524682_554d4c0886_k.jpg" title="远方有一个地方那里种有我们的梦想"><img src="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg" alt="远方有一个地方那里种有我们的梦想"/> <h3 class="am-gallery-title">远方有一个地方那里种有我们的梦想</h3> <div class="am-gallery-desc">2375-09-26</div></a> </div> </li> <li> <div class="am-gallery-item"> <a href="https://farm3.staticflickr.com/2941/15346557971_d8f3d52978_k.jpg" title="某天也许会相遇相遇在这个好地方"><img src="https://farm3.staticflickr.com/2941/15346557971_dec5c9ac36_z.jpg" alt="某天也许会相遇相遇在这个好地方"/> <h3 class="am-gallery-title">某天也许会相遇相遇在这个好地方</h3> <div class="am-gallery-desc">2375-09-26</div></a> </div> </li> </ul> ``` ## 不使用微信图片查看器如果在微信中打开时不想调用微信的图片查看器，可以通过以下选项关闭： ```html <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview:{weChatImagePreview: false}}"> ``` `````html <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview:{weChatImagePreview: false}}"> <li> <div class="am-gallery-item"> <a href="https://farm4.staticflickr.com/3835/15329524682_554d4c0886_k.jpg" title="远方有一个地方那里种有我们的梦想"><img src="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg" alt="远方有一个地方那里种有我们的梦想"/> <h3 class="am-gallery-title">远方有一个地方那里种有我们的梦想</h3> <div class="am-gallery-desc">2375-09-26</div></a> </div> </li> <li> <div class="am-gallery-item"> <a href="https://farm3.staticflickr.com/2941/15346557971_d8f3d52978_k.jpg" title="某天也许会相遇相遇在这个好地方"><img src="https://farm3.staticflickr.com/2941/15346557971_dec5c9ac36_z.jpg" alt="某天也许会相遇相遇在这个好地方"/> <h3 class="am-gallery-title">某天也许会相遇相遇在这个好地方</h3> <div class="am-gallery-desc">2375-09-26</div></a> </div> </li> </ul> ````` ```html <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview:{weChatImagePreview: false}}"> <li> ... </li> </ul> ``` ## 数据接口 ```javascript { // id "id": "", // 自定义 class "className": "", // 主题 "theme": "", "options": { "cols": 1, // 列数 "gallery": false // 是否开启点击图片全屏显示大图功能 }, //内容（*为必备项） "content": [ { "img": "", // * "link": "", // 链接 "title": "", // *图片标题 "className": "", // 仅在设置了 link 后有效 "desc": "" // 附加信息，支持DOM，为高级定制提供DOM接口 } ] } ```

评论收藏

内容反馈

版权申诉