微信小程序开发设_bootstrap按钮插件(Button)使用方法解析

  • 栏目:行业动态 时间:2021-01-12 15:09 分享新闻到:
<返回列表

bootstrap按钮插件(Button)使用方法解析     投稿:lijiao   这篇文章主要为大家详细解析了bootstrap按钮插件Button使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
LESS版本:源文件buttons.less

点击按钮时,按钮文字变为“正在加载…”,一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态,比如禁用状态、正在加载状态、正常状态等;
按钮切换状态
按钮模仿单选按钮
按钮模仿复选按钮

按钮插件–按钮加载状态
通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息。例如,点击“加载”按钮,会触发按钮的加载的状态

加载

通过data-loading-text属性定义加载的文本信息,然后通过JavaScript给按钮绑定一个事件,并给按钮添加一个button(“loading”)方法来激活按钮的加载状态行为。如下所示:

$(function(){
 $("#loaddingBtn").click(function () {
 $(this).button("loading");

按钮插件–模拟单选择按钮

在Bootstrap框架中按钮插件中,可以通过给按钮组自定义属性data-toggle=”buttons”

 div 
 label 
 input type="radio" name="options" id="options1" 男
 /label 
 label 
 input type="radio" name="options" id="options2" 女
 /label 
 label 
 input type="radio" name="options" id="options3" 未知
 /label 
 /div 
----------------------------------------------------------------------
 div data-toggle="buttons" 
 label 
 input type="radio" name="options" id="options1" 男
 /label 
 label 
 input type="radio" name="options" id="options2" 女
 /label 
 label 
 input type="radio" name="options" id="options3" 未知
 /label 
 /div 

按钮插件–模拟复选按钮

 div 
 label 
 input type="checkbox" name="options" id="options1" 电影
 /label 
 label 
 input type="checkbox" name="options" id="options2" 音乐
 /label 
 label 
 input type="checkbox" name="options" id="options3" 游戏
 /label 
 label 
 input type="checkbox" name="options" id="options4" 摄影
 /label 
 /div 
-------------------------------------------------------------------
 div data-toggle="buttons" 
 label 
 input type="checkbox" name="options" id="options1" 电影
 /label 
 label 
 input type="checkbox" name="options" id="options2" 音乐
 /label 
 label 
 input type="checkbox" name="options" id="options3" 游戏
 /label 
 label 
 input type="checkbox" name="options" id="options4" 摄影
 /label 
 /div 

按钮插件–按钮状态切换

使用 data-toggle 属性还可以激活按钮的行为状态,实现在激活和未激活之间进行状态切换。

button type="button" data-toggle="button" 确认 /button

按钮插件–JavaScript用法

1、切换按钮状态(得到焦点)

$("#mybutton").button("toggle")

2、重新恢复按钮:

$("#mybutton").button("reset")

3、任意参数:

$(“#mybutton”).button(“任意字符参数名”)

替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。

分享新闻到:

更多阅读

微信小程序开发设_bootstrap按钮插件(Bu

行业动态 2021-01-12
bootstrap按键软件(Button)应用方式分析 文章投稿:lijiao 本文关键为大伙儿详尽分析了b...
查看全文

织梦小程序网站模板_JavaScript函数参数的

行业动态 2021-01-12
JavaScript涵数主要参数的传送方法详细说明 文中关键详细介绍了JavaScript涵数主要参数的传...
查看全文

微信小程序名片创建_canvas完成刮刮卡效果

行业动态 2021-01-12
canvas完成刮奖实际效果 文中关键详细介绍了应用canvas完成刮奖实际效果的案例。具备非...
查看全文
返回全部新闻


区域站点: 南丰县如何创建小程序   南宫市免费制作小程序   囊谦县自助下单小程序怎么做   南和县h5小程序   南华县如何创建小程序   南江县免费制作小程序   南京市自助下单小程序怎么做   南靖县h5小程序   南康市如何创建小程序   南乐县免费制作小程序   南陵县自助下单小程序怎么做   南宁市h5小程序   南平市如何创建小程序   南皮县免费制作小程序   南市区自助下单小程序怎么做   南通市h5小程序   南投县如何创建小程序   南雄市免费制作小程序   南溪县自助下单小程序怎么做   南阳市h5小程序   南漳县如何创建小程序   南召县免费制作小程序   南郑县自助下单小程序怎么做   那坡县h5小程序   那曲县如何创建小程序   纳雍县免费制作小程序   讷河市自助下单小程序怎么做   内黄县h5小程序   内江市如何创建小程序   内丘县免费制作小程序   内乡县自助下单小程序怎么做   嫩江市h5小程序   聂荣县如何创建小程序   尼玛县免费制作小程序   尼木县自助下单小程序怎么做   宁安市h5小程序   宁波市如何创建小程序   宁城县免费制作小程序   宁德市自助下单小程序怎么做   宁都县h5小程序   宁国市如何创建小程序   宁海县免费制作小程序   宁化县自助下单小程序怎么做   宁晋县h5小程序   宁陵县如何创建小程序   宁明县免费制作小程序   宁南县自助下单小程序怎么做   宁强县h5小程序   宁陕县如何创建小程序   宁武县免费制作小程序   宁乡市自助下单小程序怎么做   宁阳县h5小程序   宁远县如何创建小程序   农安县免费制作小程序   磐安县自助下单小程序怎么做   盘锦市h5小程序   盘山县如何创建小程序   磐石市免费制作小程序   盘州市自助下单小程序怎么做   蓬安县h5小程序   澎湖县如何创建小程序   蓬莱市免费制作小程序   彭山县自助下单小程序怎么做   蓬溪县h5小程序   彭阳县如何创建小程序   彭泽县免费制作小程序   彭州市自助下单小程序怎么做   偏关县h5小程序   平安县如何创建小程序   平昌县免费制作小程序   平定县自助下单小程序怎么做   屏东县h5小程序   平度市如何创建小程序   平果县免费制作小程序   平和县自助下单小程序怎么做   平湖市h5小程序   平江县如何创建小程序   平乐县免费制作小程序   平凉市自助下单小程序怎么做   平利县h5小程序   平罗县如何创建小程序   平陆县免费制作小程序   屏南县自助下单小程序怎么做   平泉市h5小程序   屏山县如何创建小程序   平顺县免费制作小程序   平塘县自助下单小程序怎么做   平潭县h5小程序   平武县如何创建小程序   萍乡市免费制作小程序   平乡县自助下单小程序怎么做   平阳县h5小程序   平遥县如何创建小程序   平阴县免费制作小程序   平邑县自助下单小程序怎么做   平远县h5小程序   平舆县如何创建小程序   皮山县免费制作小程序   普安县自助下单小程序怎么做   浦北县h5小程序   浦城县如何创建小程序   普洱市免费制作小程序   普格县自助下单小程序怎么做   浦江县h5小程序   普兰县如何创建小程序   普宁市免费制作小程序   莆田市自助下单小程序怎么做   迁安市h5小程序   乾安县如何创建小程序   潜江市免费制作小程序   潜山市自助下单小程序怎么做  

友情链接: H5建站 h5答题模板 微信公众号h5制作 h5转小程序 手机版

Copyright © 2002-2020 自助下单小程序怎么做_h5小程序_如何创建小程序_免费制作小程序_微信小程序店铺 版权所有 (网站地图) 备案号:粤ICP备10235580号