演示地址 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下拉框方法
网友评论