演示地址 http://winnicat.gitee.io/onepizza/
★图片裁剪服务 pizzaCmd.cutimg
用法
<body>
<div class="cutimg-btn">
上传图片
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">
</div>
</body>
<script>
var newCutimg = new pizzaCmd.cutimg($(".cutimg-btn input"), {
width: 640,
height: 640
});
</script>
params 参数说明
| name | value | remark |
|---|---|---|
| width | [Number]默认:320 | 图片裁剪宽度 |
| height | [Number]默认:180 | 图片裁剪高度 |
| selRange | [Boolean]默认:false | 自定义比例，默认关闭 |
| arrRange | [Array]例:["3:2","640:300"] | selRange:true; 生效 取最简比，以width为宽 |
| callback | [Function(url)] | 裁剪成功回调，url:图片地址 (base64图片) |
★下拉控件 pizzaCmd.select
标签属性（* html5新增属性）
- name [支持]
- disabled [支持]
- size [不支持]
- multiple [不支持]
- *form [支持]
- *autofocus [不支持]
- *required [不支持]
特殊标签
支持<optgroup>分组标签
参数说明
| name | value | remark |
|---|---|---|
| issearch | [Boolean] 默认: false | 是否开启搜索功能，默认关闭 |
| defalutvalue | [Number] 默认: -1 | 默认不选时的值 |
| placeholder | [String] 默认: 请选择 | notnull=true 时无效 |
| notnull | [Boolean] 默认:false | 是否必选，默认可为空 |
| value | [Number] 默认: -1 | 初始选中 mark: notnull=true时这里可能有bug |
| isAutoWidth | [Boolean] 默认:true | 是否自动宽度 |
| width | [Number] 例: 100 | isAutoWidth = false 起效 |
| selectedFn | [Function] 可为空 | 选中某选项后执行 |
用法
- 支持通过
data-*属性创建下拉组件
<select class="pz-select" name="animal" data-value="2" data-issearch="true" data-......></select>
$(".pz-select").pzSelect();
- 支持通过传参创建下拉组件
<select class="pz-select" name="xiaoming">...</select>
$(".pz-select").pzSelect({
issearch: ture,
value: 2
...
})
注意
- 若select下拉表单在页面渲染前存在，且select带有class参数为 pz-select 程序会自动初始化该组件
- 请务必 为select加上name属性， 这个值将会被用作id值
- 为了方便给自动化初始化的select组件添加点击回调函数，留了钩子 pizzaCmd.selects[selectname]
- 为方便调用，已将下拉方法整合到了jQuery类
mark
考虑增加全局初始化select下拉框方法
网友评论