jQueryMobile的按钮样式

好吧,已经学了jQueryMobile一年了,今天心血来潮,想要写一篇关于jQueryMobile的博客文章,记得去年暑假在公司实习jQueryMobile,想一想真是怀念当时还是菜鸟的自己,年轻就是任性呀(笑~),好了,关于jQueryMobile方面的概念知识,大家可以去网上查阅相关资料,今天我写了一些jQueryMobile的按钮样式,还是比较漂亮的,代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
    <title>Flat</title>
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-theme="f">
            <h1>DOTA资料大全</h1>
        </div>
        <div data-role="content">
            <a href="#" data-theme="a" data-icon="flat-settings" data-role="button">英雄简介</a>
            <a href="#" data-theme="b" data-icon="flat-new" data-role="button">物品资料</a>
            <a href="#" data-theme="c" data-icon="flat-man" data-role="button">经典出装</a>
            <a href="#" data-theme="d" data-icon="flat-mail" data-role="button">野怪资料</a>
            <a href="#" data-theme="e" data-icon="flat-bubble" data-role="button">教学视频</a>
            <a href="#" data-theme="f" data-icon="flat-menu" data-role="button">经典解说</a>
            <a href="#" data-theme="g" data-icon="flat-heart" data-role="button">明星专访</a>
            <a href="#" data-theme="g" data-icon="flat-time" data-role="button">关于作者</a>
        </div>

    </div>

</body>
</html>

网页效果如下图:

时间: 2024-10-08 10:47:48

jQueryMobile的按钮样式的相关文章

safari下按钮样式失效

这两天遇到一个问题,页面在安卓手机里面正常显示,但是在IOS里面按钮的样式完全失效了,一番了解之后才知道是 appearance属性 的原因. 在原来的样式里面加上一行"-webkit-appearance : none ;",IOS下的按钮样式立马显示出来了 #btn{width:80%; padding:2% 0; color:#fff; font-family: 'kaiti'; background:#F3AA3B; border:none;     -webkit-borde

uploadify 自定义按钮样式

uploadify是一款不错的JQUERY上传插件,但是FLASH按钮的外挂往往跟我们网页的设计不太搭配.一开始我还试图反编译uploadify.swf来修改其外观,结果发现反编译为FLA后里面没有任何图片资源. 原来,这个按钮是用CSS绘制的.代码文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式.OK,现在想修改就很简单了,不论你是写一段新的CSS还是替换成图片都可以的. 我懒省事,就直接用图片作为按钮背景了. 代码: .uploadify-button { b

[HTML/CSS]uploadify自定义按钮样式

概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式. 1 .uploadify-button { 2 background-color: #505050; 3 background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 4 background-

完成FileUpload的文件上传功能,且可改按钮样式

FileUpload控件: 更改按钮样式思路: 自己定义一个按钮,设置该按钮的样式,然后将FileUpload控件通过定位定在自己定义的按钮上面,设置z-index,使得控件浮在自己定义的按钮上面,记得设置该控件为透明,这样,看着点的是自己定义的那个按钮,实际上点击的是控件,然后定义一个"上传"按钮,点击上传按钮时进入代码层: 上传文件思路: 1)确定上传文件所保存的路径: 2)判断路径是否存在,存在则继续,不存在则创建: 3)获取上传文件的上传路径 或者文件名 4)保存文件: 多文件

一种好看的HTML按钮样式

发现一种简洁好看的 <input type="submit" value="Register" /> 按钮样式. 样式预览 CSS代码 form input[type=submit]{ border: 1px solid #004C9B; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0

改变滑动删除按钮样式

在自定义 cell 中实现如下代码: // 改变滑动删除按钮样式 - (void)layoutSubviews { [super layoutSubviews]; for (UIView *subView in self.subviews){ if([subView isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")]) { CGRect cRect = subView.frame; cRe

a span做成按钮样式不选中文字

a,span做成按钮样式时,文字会被选中.加以下CSS可以让其不选中.测试三大浏览器都可以 .button { display: inline-block; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } 示例如下 选择时,选不中 按钮a 按钮span 不加时,可以选中 不加

CSS3 3D分页按钮样式

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>石家庄礼品公司</title><style>.ui-page{border: 0px;background: #37578C;background: -webkit-linear-gradient(#37578C, #608BAE);background: -moz-linear-grad

按钮样式加载等待

使用插件Ladda,基于bootstrap的样式实现加载等待的效果: 首先引用.css以及.js文件: <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="dist/ladda-themeless.min.css"> <script src="dist/spin.min.js&