Skip to content

A
amazeui

Miykael_xxm / amazeui

通知 1
Star 0
Fork 0
A
amazeui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 33a8bfb3 编写于 作者: M Minwe
浏览文件
操作

update gallery

上级 a4fa4427
隐藏空白更改
内联 并排
Showing with 148 addition and 9 deletion
CHANGELOG.md
浏览文件 @ 33a8bfb3
......@@ -5,14 +5,21 @@
### CSS
- 重新样式梳理 `z-index`；
__Button__：
- `NEW` 增加圆角和直角样式。
- `NEW` 增加圆角和直角样式；
- `IMPROVED` 按钮样式细节调整。
__Button Group__：
- `CHANGED` 使用 `flexbox` 实现按钮等分。
__Comment__：
- 尖角样式细节调整。
__Form__：
- `CHANGED` 调整 `select` 样式。
......@@ -41,8 +48,31 @@ __PureView__：
- `NEW` 增加获取大图选项，可以通过 `a` 的 `href` 或者 `img` 的 `data-rel` 获取大图地址；
- `NEW` 是否显示分享按钮选项；
- `NEW` 增加在微信中打开时调用微信图片查看器选项；
- `NEW` 增加图片 Loading 图标；
- `IMPROVED` 解决打开/关闭窗口抖动问题；
- `IMPROVED` 解决图片变形问题。
- `IMPROVED` 解决图片比例失调问题。
__Sticky__：
- `CHANGED` #90 底部边距计算逻辑有问题，暂时取消。
### Web 组件
- 重新样式梳理 `z-index`；
__Figure、Paragraph__：
- 移除遗留的无用的样式。
__Figure__：
- `NEW` `data-rel` 接口，可以设置大图路径；
__Gallery__：
- `NEW` `data-rel` 接口，可以设置大图路径；
- `IMPROVED` PureView 调用逻辑增强，判断是否设置了 PureView 的选项。
## 2014.09 W3
......
vendor/amazeui.hbs.partials.js
浏览文件 @ 33a8bfb3
......@@ -10,7 +10,7 @@
hbs.registerPartial("footer", "{{#this}}\n <footer data-am-widget=\"footer\"\n class=\"am-footer {{#if theme}}am-footer-{{theme}}{{else}}am-footer-default {{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"\n {{#if id}}id=\"{{id}}\"{{/if}}>\n <div class=\"am-footer-switch\">\n <span class=\"{{#if options.modal}}am-footer-ysp{{/if}}\" data-rel=\"mobile\"\n data-am-modal=\"{target: '#am-switch-mode'}\">\n {{#unless content.switchName}}\n {{#ifCond content.lang '==' 'en'}}\n Mobile\n {{else}}\n 云适配版\n {{/ifCond}}\n {{else}}\n {{content.switchName}}\n {{/unless}}\n </span>\n <span class=\"am-footer-divider\"> | </span>\n <a id=\"godesktop\" data-rel=\"desktop\" class=\"am-footer-desktop\" href=\"#\">\n {{#ifCond content.lang '==' 'en'}}\n Desktop\n {{else}}\n 电脑版\n {{/ifCond}}\n </a>\n </div>\n <div class=\"am-footer-miscs {{#if options.textPosition}}am-text-left{{/if}}\">\n\n {{#if options.techSupportCo}}\n {{#ifCond content.lang '==' 'en'}}\n <p>Supported by {{#if options.techSupportSite}}<a href=\"{{options.techSupportSite}}\"\n title=\"{{options.techSupportCo}}\"\n target=\"_blank\">{{{options.techSupportCo}}}</a>{{else}}{{{options.techSupportCo}}}{{/if}}\n .</p>\n {{else}}\n <p>由 {{#if options.techSupportSite}}<a href=\"{{options.techSupportSite}}\" title=\"{{options.techSupportCo}}\"\n target=\"_blank\">{{{options.techSupportCo}}}</a>{{else}}{{{options.techSupportCo}}}{{/if}}\n 提供技术支持</p>\n {{/ifCond}}\n\n {{/if}}\n\n {{#if content.poweredBy }}\n {{ content.poweredBy }}\n {{else}}\n {{#ifCond content.lang '==' 'en'}}\n <p>Powered by AllMobilize.</p>\n {{else}}\n <p>云适配驱动</p>\n {{/ifCond}}\n {{/if}}\n {{#each content.companyInfo}}\n <p>{{{detail}}}</p>\n {{/each}}\n </div>\n </footer>\n\n <div id=\"am-footer-mode\"\n class=\"am-modal am-modal-no-btn am-switch-mode-m {{#if theme}}am-switch-mode-m-{{theme}}{{/if}}\">\n <div class=\"am-modal-dialog\">\n <div class=\"am-modal-hd am-modal-footer-hd\">\n <a href=\"javascript:void(0)\" data-dismiss=\"modal\" class=\"am-close am-close-spin\" data-am-modal-close>&times;</a>\n </div>\n <div class=\"am-modal-bd\">\n {{#ifCond content.lang '==' 'en'}}\n You are visiting\n {{else}}\n 您正在浏览的是\n {{/ifCond}}\n\n <span class=\"am-switch-mode-owner\">\n {{#if content.owner}}\n {{content.owner}}\n {{else}}\n 云适配\n {{/if}}\n </span>\n\n <span class=\"am-switch-mode-slogan\">\n {{#if content.slogan}}\n {{{content.slogan}}}\n {{else}}\n {{#ifCond content.lang '==' 'en'}}\n mobilized version for your device.\n {{else}}\n 为您当前手机订制的移动网站。\n {{/ifCond}}\n {{/if}}\n </span>\n </div>\n </div>\n </div>\n{{/this}}\n");
hbs.registerPartial("gallery", "{{#this}}\n <ul data-am-widget=\"gallery\" class=\"am-gallery{{#if options.cols}} sm-block-grid-{{options.cols}}{{else}} sm-block-grid-2{{/if}}\n md-block-grid-3 lg-block-grid-4 {{#if\n theme}}am-gallery-{{theme}}{{else}}am-gallery-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" data-am-gallery=\"{ {{#if options.gallery}}pureview: true{{/if}} }\" {{#if id}}id=\"{{id}}\"{{/if}}>\n {{#each content}}\n <li>\n <div class=\"am-gallery-item\">\n {{#if link}}\n <a href=\"{{link}}\">\n {{#if img}}<img src=\"{{img}}\" alt=\"{{title}}\"/>{{/if}}\n {{#if title}}\n <h3 class=\"am-gallery-title\">{{{title}}}</h3>\n {{/if}}\n {{#if desc}}\n <div class=\"am-gallery-desc\">{{{desc}}}</div>\n {{/if}}\n </a>\n {{else}}\n {{#if img}}<img src=\"{{img}}\" alt=\"{{title}}\"/>{{/if}}\n {{#if title}}\n <h3 class=\"am-gallery-title\">{{{title}}}</h3>\n {{/if}}\n {{#if desc}}\n <div class=\"am-gallery-desc\">{{{desc}}}</div>\n {{/if}}\n {{/if}}\n </div>\n </li>\n {{/each}}\n </ul>\n{{/this}}\n");
hbs.registerPartial("gallery", "{{#this}}\n <ul data-am-widget=\"gallery\" class=\"am-gallery{{#if options.cols}} sm-block-grid-{{options.cols}}{{else}} sm-block-grid-2{{/if}}\n md-block-grid-3 lg-block-grid-4 {{#if\n theme}}am-gallery-{{theme}}{{else}}am-gallery-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" data-am-gallery=\"{ {{#if options.gallery}}pureview: true{{/if}} }\" {{#if id}}id=\"{{id}}\"{{/if}}>\n {{#each content}}\n <li>\n <div class=\"am-gallery-item\">\n {{#if link}}\n <a href=\"{{link}}\">\n {{#if img}}<img src=\"{{img}}\" {{#if rel}}data-rel=\"{{rel}}\"{{/if}} alt=\"{{title}}\"/>{{/if}}\n {{#if title}}\n <h3 class=\"am-gallery-title\">{{{title}}}</h3>\n {{/if}}\n {{#if desc}}\n <div class=\"am-gallery-desc\">{{{desc}}}</div>\n {{/if}}\n </a>\n {{else}}\n {{#if img}}<img src=\"{{img}}\" {{#if rel}}data-rel=\"{{rel}}\"{{/if}} alt=\"{{title}}\"/>{{/if}}\n {{#if title}}\n <h3 class=\"am-gallery-title\">{{{title}}}</h3>\n {{/if}}\n {{#if desc}}\n <div class=\"am-gallery-desc\">{{{desc}}}</div>\n {{/if}}\n {{/if}}\n </div>\n </li>\n {{/each}}\n </ul>\n{{/this}}\n");
hbs.registerPartial("gotop", "{{#this}}\n <div data-am-widget=\"gotop\" class=\"am-gotop {{#if theme}}am-gotop-{{theme}}{{else}}am-gotop-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" {{#if id}}id=\"{{id}}\"{{/if}}>\n <a href=\"#top\" title=\"{{content.title}}\">\n {{#if content.title}}\n <span class=\"am-gotop-title\">{{content.title}}</span>\n {{/if}}\n {{#if content.customIcon}}\n <img class=\"am-gotop-icon-custom\" src=\"{{content.customIcon}}\" />\n {{else}}\n {{#if content.icon}}\n <i class=\"am-gotop-icon am-icon-{{content.icon}}\"></i>\n {{else}}\n <i class=\"am-gotop-icon am-icon-chevron-up\"></i>\n {{/if}}\n {{/if}}\n </a>\n </div>\n{{/this}}");
......
widget/gallery/HISTORY.md
浏览文件 @ 33a8bfb3
# Gallery 更新日志
---
## ver 1.2.0 (2014.02.21)
## v1.3.0 (2014.09.26)
- `IMPROVED` 使用 PureView 插件；
- `IMPROVED` 增加 `data-rel` 接口，用于设置大图；
- `IMPROVED` 微信浏览器里调用内置的图片查看器。
## v1.2.0 (2014.02.21)
- `New` Pinch Zoom
## ver 1.1.1 (2014.01.22)
## v1.1.1 (2014.01.22)
- `IMPROVED` 所有图标使用 font icon；
- `IMPROVED` [#460](https://github.com/allmobilize/issues/issues/460) Gallery IE Mobile 10+ 支持；
......
widget/gallery/README.md
浏览文件 @ 33a8bfb3
......@@ -31,6 +31,100 @@ var data = [
return data;
```
## 指定缩略图
基于节省流量考虑，可以指定缩略图，用户点击放大的时候再显示大图。
### 使用 `data-rel`
将大图放在 `<img>` 的 `data-rel` 属性上。
`````html
<ul data-am-widget="gallery" class="am-gallery sm-block-grid-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 sm-block-grid-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 sm-block-grid-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 sm-block-grid-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>
```
## 数据接口
```javascript
......
widget/gallery/package.json
浏览文件 @ 33a8bfb3
{
"name": "gallery",
"version": "1.2.0",
"version": "1.3.0",
"localName": {
"en": "Gallery",
......
widget/gallery/src/gallery.hbs
浏览文件 @ 33a8bfb3
......@@ -7,7 +7,7 @@
<div class="am-gallery-item">
{{#if link}}
<a href="{{link}}">
{{#if img}}<img src="{{img}}" alt="{{title}}"/>{{/if}}
{{#if img}}<img src="{{img}}" {{#if rel}}data-rel="{{rel}}"{{/if}} alt="{{title}}"/>{{/if}}
{{#if title}}
<h3 class="am-gallery-title">{{{title}}}</h3>
{{/if}}
......@@ -16,7 +16,7 @@
{{/if}}
</a>
{{else}}
{{#if img}}<img src="{{img}}" alt="{{title}}"/>{{/if}}
{{#if img}}<img src="{{img}}" {{#if rel}}data-rel="{{rel}}"{{/if}} alt="{{title}}"/>{{/if}}
{{#if title}}
<h3 class="am-gallery-title">{{{title}}}</h3>
{{/if}}
......
widget/gallery/src/gallery.js
浏览文件 @ 33a8bfb3
......@@ -12,7 +12,10 @@ define(function(require, exports, module) {
$gallery.each(function() {
var options = UI.utils.parseOptions($(this).attr('data-am-gallery'));
options.pureview && $(this).pureview();
if (options.pureview) {
(typeof options.pureview === 'object') ? $(this).pureview(options.pureview) : $(this).pureview();
}
});
$galleryOne.each(function() {
......
widget/gallery/src/gallery.less
浏览文件 @ 33a8bfb3
......@@ -6,3 +6,9 @@
margin: 0;
}
}
&[data-am-gallery*='pureview'] {
img {
cursor: pointer;
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或