UI components For SDK H5 SUI Demo Pages
data-toggle="2000"
toggle属性,指定该按钮的toggle时间为2000ms
<button class="sui-btn" data-toggle="2000"></button>
data-feedback="sui-feedback"
自定义反馈属性,指定该按钮反馈类为feedback来进行自定义反馈
<button class="sui-btn" data-feedback="sui-feedback"></button>
<div class="sui-inp-box">
<input class="sui-inp" data-focus="true" /> 设置focus属性够,输入框聚焦后会高亮
</div>
<div class="sui-popbox"
data-position='fixed' data-transition=true data-cancel=true data-noscroll='true'></div>
data-position='fixed'
属性指定该弹出框位置JS控制fixed
data-transition=true
属性指定当弹框位置为fixed的时候,滚动页面,Fixed位置的过度动画为渐变的,
不设置则无过度动画
data-cancel=true
属性指定当点击非弹出框位置,隐藏弹出框
data-noscroll=true
属性指定当点击非弹出框位置,弹框页面不可滚动
data-center=true
属性指定弹出框位置居中,此属性建议不要与data-position="fixed"
共用
命名尽量避免与JQ产生冲突
$('.sui-cpn').suiShow() //显示UI组件
$('.sui-cpn').suiHide() //隐藏UI组件
$('.sui-cpn').delayHide([time]) //time时间后隐藏UI组件,默认空参数认为time == 100
$('.sui-cpn').isHide() //UI组件是否已经隐藏,return bool
$('.sui-cpn').suiToggle() //通用UI组建的toggle
等同于<div class="sui-btn" data-toggle="200">的data-toggle属性
$('.btn').btnToggle(time, [callback]) //按钮toggle,time为toggle时间,callba为toggle完成的回调
$('.btn').enabled() //取消按钮不可点击效果
$('.btn').disabled() //按钮不可点击效果
$('.btn').isdisabled() //按钮是否处于disable状态, return bool
$('.btn').feed() //应用默认反馈效果
$('.btn').unfeed() //取消按钮的默认反馈效果
$('.btn').feeback([className]) //自定义反馈,@className:反馈样式class,空参数默认为:sui-feedback
$('.sui-popbox').checkPosition(); //定时检查该弹框的高度位置是否正确并更正
$('.sui-popbox').tansition(); //设置改弹框的滚动的过渡动画
$('.sui-popbox').showPopbox(); //显示一个隐藏的弹框
$('.sui-popbox').fixed(); //设置弹框的高度固定
暂无,持续更新中...
.sui-btn /*普通按钮*/
.sui-btn-sel /*选择下拉按钮*/
.sui-btn-group /*按钮组*/
.sui-btn-nav /*导航栏按钮*/
.sui-btn-check
.sui-btn-switch
button主题
.sui-btn-orange
.sui-btn-primary
.sui-btn-silver
.sui-btn-inverse
.sui-btn-pure
这是按钮
input主题
.sui-inp-shadow-top /*输入框内部阴影,偏上*/
.sui-inp-shadow-bottom /*输入框内部阴影,偏下*/
.sui-inp-shadow-none /*输入框无内部阴影*/
popup box主题
.sui-popbox-black
###Button
<!--按钮默认样式为橙色-->
<input class="sui-btn sui-w-full sui-mg-top" type="button" value="登录">
<!--可更换按钮样式:sui-btn-silver-->
<input class="sui-btn sui-btn-silver sui-mg-top" type="button" value="修改密码">
<!--可设置toggle属性,指定toggle时间。对应的方法:$('btnSelctor').toggle(time, callback)-->
<input class="sui-btn sui-btn-primary sui-mg-top" data-toggle="2000" type="button" value="toggle">
###input
<!---->
<!--普通输入框-->
<div class="sui-inp-cmp sui-mg-top">
<div class="sui-inp-box">
<input class="sui-inp" type="text" placeholder="6-20位数字" />
</div>
</div>
<!--输入框带label-->
<div class="sui-inp-cmp sui-mg-top">
<div class="sui-inp-label">登录</div>
<div class="sui-inp-box">
<input class="sui-inp" type="text" placeholder="6-20位数字" />
</div>
</div>
<!--输入框组-->
<div class="sui-inp-group sui-mg-top">
<div class="sui-inp-box">
<input class="sui-inp" type="text" placeholder="6-20位数字" />
</div>
<div class="sui-inp-box">
<input class="sui-inp" type="text" placeholder="6-20位数字" />
</div>
</div>
###popup box
<!--弹出框组件-->
<div class="sui-popbox sui-disp-none" data-position='fixed' data-transition=true data-cancel=true id="box1">
<!--遮罩-->
<div class="sui-popbox-mask"></div>
<!--弹出框-->
<div class="sui-popbox-box">
<!--弹出框标题-->
<div class="sui-popbox-title">title</div>
<!--弹出框内容框-->
<div class="sui-popbox-content">
<div class="sui-mg-top">UC账号:123123123</div>
<div class="sui-inp-box sui-mg-top sui-inp-shadow-top">
<input class="sui-inp" type="text" placeholder="6-20位数字" />
</div>
<input class="sui-btn sui-w-full sui-mg-top" type="button" value="注册">
</div>
</div>
</div>