android好看的输入框样式

转载

网络智叶 2024-12-02 12:38:02

文章标签 android好看的输入框样式 ico jquery css 文章分类 Android 移动开发

1.mobile按钮有三种写法及html5也有三种写法:

a) <a href="#" data-role="button">按钮</a> b) <a href="#" class="ui-btn">按钮</a> c) <button>按钮</button>

d) <input type="button" value="按钮"> f) <input type="reset" value="重置"> g) <input type="submit" value="提交">

<a href="#" data-role="button">按钮2</a>
<a href="#" class="ui-btn">按钮3</a>
<button>按钮4</button>
<input type="button" value="按钮5">
<input type="reset" value="按钮6">
<input type="submit" value="按钮7">

2.按钮事件初始化：

$(document).on("pagecreate",function(){});

$(document).bind("pagecreate",function(){});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery Mobile-网页基本结构</title>
        <script type="text/javascript" src="../js/jquery-2.2.3.min.js" ></script>
        <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js" ></script>
        <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <script>
            $(document).on("pagecreate",function(){
                $("#button_bold").click(function(){
                    $("#demoFiled").css("font-weight","700");
                });
                $("#button_normal").click(function(){
                    $("#demoField").css("font-weight","normal");
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-position="fixed" data-tap-toggle="false">
                <h1>按钮处理演示</h1>
            </div>
            <div class="ui-content" role="main">
                <a href="#" data-role="button" id="button_bold">粗体字</a>
                <a href="#" data-role="button" id="button_normal">复原</a>
                <div id="demoField">测试</div>
            </div>
            <div data-role="footer" data-position="fixed" data-tap-toggle="false">
                <h6>页尾</h6>
            </div>
        </div>
    </body>
</html>

3.按钮基本样式

属性	CSS类	描述
data-inline	ui-btn-inline	当属性值为true时，按钮的宽度随着按钮上文字或者图标内容而改变
data-mini	ui-mini	迷你(紧凑)型按钮
data-shadow	ui-shadow	属性值为true时，按钮呈现出阴影效果
data-theme		主题样式(a~z)
data-corners	ui-corner-all	属性值为true时，按钮的4个角为圆角，否则为直角
	ui-state-disabled	使<a>按钮失效
disabled		使<button>按钮失效
data-role		取消jquery mobile对按钮的样式改变，保留原始样式

默认图标是白色使用ui-alt-icon替换成黑色，去除圆形背景ui-nodisc-icon <a href="#" class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-top ui-nodisc-icon">主页</a>

<div data-role="page">
            <div data-role="header" data-position="fixed" data-tap-toggle="false">
                <a href="#page2">第二页</a>
                <h1>按钮样式</h1>
            </div>
            <div class="ui-content" role="main">
                <button disabled>失效状态</button><br>
                <a href="#" class="ui-btn ui-state-disabled">失效状态</a><br>
                <a href="#" data-role="button" data-mini="true" data-inline="true">inline</a><br>
                <a href="#" data-role="button" data-shadow="false">无阴影</a><br>
                <a href="#" data-role="button" data-corners="false">直角边框</a>
            </div>
            <div data-role="footer" data-position="fixed" data-tap-toggle="false">
                <h6>页尾</h6>
            </div>
        </div>
        <div data-role="page" data-theme="b" id="page2">
            <div data-role="header">
                <h1>按钮与图标</h1>
            </div>
            <div class="ui-content" role="main">
                <a href="#" data-role="button" data-icon="home" data-theme="b">图标按钮</a>
                <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="right">右</a>
                <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="top">上</a>
                <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="left">左</a>
                <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="bottom">下</a>
                <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="notext">无文字</a>
                <a href="#" data-role="button" data-icon="home" data-theme="b" data-iconpos="notext" data-corners="false">无文字</a>
            </div>
        </div>

4.单选及复选框按钮排列样式：相同先框用容器<fireldset data-role="controlgroup"> data-type="horizontal"按钮组水平排列；

<label for>中的for属性值对应的input类型的id名称

div data-role="page">
            <div data-role="header">
                <h1>单选按钮</h1>
            </div>
            <div class="ui-content" role="main">
                <form>
                    <fieldset data-role="controlgroup" data-mini="true" data-iconpos="right">
                        <legend>水果</legend>
                        <label for="fruit1">苹果</label>
                        <input type="radio" name="fruit" id="fruit1" value="苹果"/>
                        <label for="fruit2">香蕉</label>
                        <input type="radio" name="fruit" id="fruit2" value="香蕉"/>
                        <label for="fruit3">葡萄</label>
                        <input type="radio" name="fruit" id="fruit3" value="葡萄"/>
                        <label for="fruit4">西瓜</label>
                        <input type="radio" name="fruit" id="fruit4" value="西瓜"/>
                    </fieldset>
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <label for="fruit5">苹果</label>
                        <input type="checkbox" name="fruit0" id="fruit5" value="苹果"/>
                        <label for="fruit6">香蕉</label>
                        <input type="checkbox" name="fruit0" id="fruit6" value="香蕉"/>
                        <label for="fruit7">葡萄</label>
                        <input type="checkbox" name="fruit0" id="fruit7" value="葡萄"/>
                        <label for="fruit8">西瓜</label>
                        <input type="checkbox" name="fruit0" id="fruit8" value="西瓜"/>
                    </fieldset>
                 </form>
            </div>
        </div>

5.文本输入框input类别：text/search/date/time/email/color

search前面带搜索图标,date有下拉选择不同的浏览器显示会不一样，time会以时间格式，color会弹出颜色对话框选择

class="ui-field-contain"会把文本与输入框显示一行，但对手机屏幕无效，大屏幕有效。

data-clear-btn="true" 输入框右边会显示一个X的清除内容按钮

<div data-role="page">
            <div data-role="header">
                <h1>文本输入</h1>
            </div>
            <div class="ui-content" role="main">
                <form>
                    <label for="mysearch">查询</label>
                    <input type="search" name="mysearch" id="mysearch" placeholder="查询条件..." data-clear-btn="true" />
                    <label for="mytext">文本</label>
                    <input type="text" name="mytext" id="mytext" placeholder="请输入文本内容"/>
                    <label for="mydate">日期</label>
                    <input type="date" name="mydate" id="mydate" />
                    <label for="mytime">时间</label>
                    <input type="time" name="mytime" id="mytime" />
                    <div class="ui-field-contain">
                        <label for="myemail">电子邮件</label>
                        <input type="email" name="myemail" text="mytext" data-clear-btn="true"/>
                    </div>
                    <div class="ui-field-contain">
                        <label for="mycolor">颜色</label>
                        <input type="color" name="mycolor" id="mycolor"/>
                    </div>
                </form>
            </div>
        </div>

6.网格：最多拥有5列，当一个风格只有一列是ui-grid-solo, 当一个风格拥有2列到5列时，分别用字母a-d来代表，附加到CSS类名前缀ui-grid

网格中的每一个单元格通过CSS类名前缀“ui-block-”表示所处的位置。处于一行中第一个位置的单元格使用位置序号a, 第二个b,以此类推c,d,e

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery Mobile-网页基本结构</title>
        <script type="text/javascript" src="../js/jquery-2.2.3.min.js" ></script>
        <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js" ></script>
        <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <style>
            div[class^="ui-block-"]>div{
                height: 40px;
                background-color: #ccffff;
                border-style:dotted;
                border-width: 1px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>网络</h1>
            </div>
            <div class="ui-content" role="main">
                <div class="ui-grid-b">
                    <div class="ui-block-a">
                        <div>第一列</div>
                    </div>
                    <div class="ui-block-b">
                        <div>第一列</div>
                    </div>
                    <div class="ui-block-c">
                        <div>第一列</div>
                    </div>
                    <div class="ui-block-a">
                        <div>第一列</div>
                    </div>
                    <div class="ui-block-b">
                        <div>第一列</div>
                    </div>
                    <div class="ui-block-c">
                        <div>第一列</div>
                    </div>
                    <div class="ui-block-a">
                        <div>第一列</div>
                    </div>
                    <div class="ui-block-b">
                        <div>第一列</div>
                    </div>
                    <div class="ui-block-c">
                        <div>第一列</div>
                    </div>
                </div>
                <div class="ui-grid-b">
                    <div class="ui-block-a">
                        <a href="#" data-role="button" data-icon="home">主页</a>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" data-role="button" data-icon="phone">联系</a>
                    </div>
                    <div class="ui-block-c">
                        <a href="#" data-role="button" data-icon="search">查询</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。