Icon only buttons not working with "ui-btn-left" or "ui-btn-right" css class

最新推荐文章于 2023-03-03 16:51:24 发布
转载 最新推荐文章于 2023-03-03 16:51:24 发布 · 1.2k 阅读 · 0
收录于
jquery mobile

当前文章被收录于：

jquery mobile
3 篇文章 0 人学习
订阅专栏 查看详情
本文解决了在使用jQuery Mobile框架时，图标按钮在ui-btn-left和ui-btn-right类中不显示的问题。通过调整CSS样式及按钮展示方式，实现了期望的布局效果。
jQuery Mobile
wolfftw
wolfftw

Icon only buttons not working with "ui-btn-left" or "ui-btn-right" css class

in jQuery Mobile  •  1 year ago  
What I get is:



What I was hoping for is (but with buttons on right side and on same line, like above picture):



Here's my code (I am using a ThemeRoller theme, without modification).  I am using jquery.mobile-1.2.0.

<div data-theme="a" data-role="header">
      <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal" data-mini="true">
             <a href="#" data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="notext">back</a>
      </div>
      <h3>
           Test
      </h3>
      <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal" data-mini="true">
            <a href="#" data-role="button" data-iconpos="notext" data-icon="grid">sort</a>
            <a href="#" data-role="button" data-iconpos="notext" data-icon="filterIcon">filter</a>
      </div>
</div>

Replies(2)

Anthony_ac
Anthony_ac
Re: Icon only buttons not working with "ui-btn-left" or "ui-btn-right" css class
1 year ago
Hopefully, you should be able to adapt the following to suit.
 
Copy code
  1. <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <style>
    .inline-buttons{ display: inline-block; margin: 0; }
    </style>
    </head>
    <body>
    <div data-role="page">
     <div data-role="header">
      <div class="ui-btn-left">
       <a class="inline-buttons" href="plus.htm" data-role="button" data-theme="b" data-icon="plus" data-iconpos="notext"></a>&nbsp;
       <a class="inline-buttons" href="minus.htm" data-role="button" data-theme="e" data-icon="minus" data-iconpos="notext"></a>
      </div>
      <h1>My Header</h1>    
      <div class="ui-btn-right">
       <a href="gear.htm" class="inline-buttons" data-icon="gear" data-iconpos="notext" data-role="button"></a>&nbsp;
       <a href="home.htm" class="inline-buttons" data-icon="home" data-iconpos="notext" data-role="button"></a>
      </div>
     </div><!-- /header -->
    </div>
    </body>
    </html>
wolfftw
wolfftw
Re: Icon only buttons not working with "ui-btn-left" or "ui-btn-right" css class
1 year ago
标签
#jquery mobile
香橙派AI Pro散热风扇智能调控实战：从手动调参到脚本自动化
weixin_33711647的博客
05-19 491
本文详细介绍了香橙派AI Pro散热风扇智能调控的实战方案，从手动调参到脚本自动化的全过程。通过温度监测模块和多级风速控制策略，实现动态响应温度变化，优化散热效果。智能调控方案相比手动调节，能显著降低温度波动和噪音，提升硬件寿命和推理性能稳定性。
button按钮设置靠右
热门推荐
lijiang_shen的博客
09-21 6万+
1.可以给 button 增加样式 float:right; 2.也可以给父div 增加样式 text-align:right; 3.效果图
<div class="ui-btn-right">
piaofenglanyan的专栏
04-05 922
按钮的位置可以通过class来设置，二
jQuery Mobile学习笔记（二）：按钮
学海无涯苦作舟的博客
03-09 696
本篇文章继续测试jQuery Mobile页面中最常用的控制项：按钮，它实际上是表单元素的一种，但因为它不只用在表单中，因此独立出来做测试。在jQuery Mobile中按钮分为两类： 超连结按钮：将一个元素套上data-role =“ button”属性所建立的按钮 表单按钮：以button元素与type =“ button” /“ reset” /“ submit”的输入元素所建立之按钮 表单按钮适合用在表单中，操作换页应该使用具有data-role =“ button”属性的超连结按钮，因为超连结本质
vue 自定义指令控制按钮权限
神膘护体小月半的博客
03-03 1602
vue 自定义指令控制按钮权限
jQuery Mobile中按钮＜a＞或＜button＞添加class样式ui-btn-*
08-31 4930
全栈工程师开发手册 （作者：栾鹏） jQuery Mobile 所有class选项jQuery Mobile中按钮class样式<a> 或 <button> 元素添加以下类 (不是 <input> 按钮)://ui-btn 添加在 <a> 元素上并以按钮形式展示 //ui-btn-inline 在同一行上显示按钮 //ui
自我回答，问题2：比如有个历史记录，，然后左边有个按钮btnleft，，右边有个按钮btnright，点击对应按钮，，就会有对应历史记录推进，或者后退...
weixin_30875157的博客
01-18 477
回答：暂时无解 转载于:https://www.cnblogs.com/Lauren-J/p/10286670.html
JQuery Mobile入门——设定按钮位置
liang408015204的专栏
01-09 9229
1、在头部栏中，如果只放置一个链接按钮，不论放置在标题的左侧还是右侧，其最终显示在标题的左侧，如果想改变位置，需要添加新的类别属性ui-btn-left左侧和ui-btn-right右侧。 2、示例代码：     New Document                    图片  下一张   //按钮在右侧   @2013 3I S
Bootstrap｜“icon-bar“与“sr-only“的作用
m0_52363682的博客
07-26 1829
"icon-bar"与"sr-only"的作用 Bootstrap十分适合制作响应式页面。当我们利用Bootstrap制作导航条时，在模版代码中会遇到以下代码: <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only"
jquerymobile的页面滑动切换效果实现
小明的博客
04-27 4300
这里直接给出四个html，可以轮番切换 一、index.html html> html> head> title>Splashscreen Exampletitle> script type="text/javascript" charset="utf-8" src="cordova.js">script> link rel="stylesheet" type="t
窗口宽度控制-利用箭头（button）控制滚动条
金币博客
04-25 475
html> html lang="en"> head> meta charset="UTF-8"> title>title> style> #btnRight,#btnLeft{ position: fixed; top:45%; display: none; } #btnRight{ left:90%; } style> head>
按钮控件
MmMVP的专栏
04-27 4597
按钮控件(button)  [下载例程]　　按钮控件根据其风格属性可派生出：命令按钮(Pushbutton)、检查框(Check Box)、单选按钮(Radio Button)、组框(Group Box)和自绘式按钮(Owner-draw Button)。　　命令按钮是指可以响应鼠标点击的小矩形子窗口。命令按钮的作用是对用户的鼠标单击作出反应并触发相应的事件，在按钮中既可以显示正文，也可以显示位图
Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式
weixin_34343000的博客
03-17 2614
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
ionic3 — 标题居中以及添加button的方法,修改图标大小
仲夏夜之恋的专栏
08-25 4108
先看一下效果图：   我想要的结果是：标题居中显示，并且在标题的左边显示一个button。首先我查阅了官网的API，官网给的代码是这样的： Page Title 理论上应该是左边会有一个“menu”图形的按钮，中间显示“p
jQuery Mobile学习笔记（三）——UI组件
qq_36508844的博客
09-14 914
这一章，详细学习一下常用的JM组件。组件基本上可以分为一下几类： 工具栏组件格式化组件按钮组件列表组件表单组件 1.工具栏组件（页头、页脚）： 定位： 内联模式——页面长度超过可见高度时，页脚将被隐藏，同时页头只在滚动条在顶部时才可见（默认模式）。 标准固定模式——data-position=“fixed”，用户滚动页面内容时，工具栏会自动隐藏，滚动完成时，固定工具栏会再次在顶部或底部对应的位置出现
RightBtn
weixin_30593261的博客
12-03 120
-(void)SetRightBtn {//返回按钮 // UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0,0,44,44)]; // [button setBackgroundImage:[UIImage imageNamed:@"kqls.png"] forState:UIControlStat...
html自定义按钮图标,Jquery+Mobile自定义按钮图标步骤详解
weixin_29503627的博客
06-08 810
这次给大家带来Jquery+Mobile自定义按钮图标步骤详解，Jquery+Mobile自定义按钮图标的注意事项有哪些，下面就是实战案例，一起来看一下。很多朋友都反应jquery mobile自带的图标真的是少之又少，另外我也觉得图标偏小(系统自带的是18*18的)，于是琢磨着如何自定义按钮图标，下面小编把我的方法分享给大家。刚接触Jquery Mobile框架，遇到个很现实问题，就是如何自定义...
ionic4.x 学习笔记（二）—— Ionic4.x 中的 UI 组件
Lyrelion的博客
10-26 1134
1.Ionic4.x 内置颜色 primary secondary tertiary success warning danger dark medium light <ion-button color="primary"> primary </ion-button> <ion-button color="secondary"> secondary </ion-button> 2.Ionic4.x 中的按钮 <ion-button&gt.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值