Magic-Input 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Magic-Input 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Magic-Input 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Magic-Input 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Magic-Input 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 HTML/CSS 查看源码 »
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 国产
投 递 者 小弟调调
适用人群 未知
收录时间 2016-04-29

软件简介

CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo
源码:https://github.com/dcsite/magic-input

使用

$ npm install magic-input

你需要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用Stylus 你就可以使用 magic-input.styl 文件

<link rel="stylesheet" type="text/css" href="dist/magic-input.min.css">

Checkbox iPhone 的样式

<input type="checkbox" class="mgc-switch mgc-sm" checked /> <input type="checkbox" class="mgc-switch" /> <input type="checkbox" class="mgc-switch mgc-lg" checked />

Checkbox

<input type="checkbox" class="mgc" checked/> Default <input type="checkbox" class="mgc mgc-primary" checked /> Primary <input type="checkbox" class="mgc mgc-success" /> Success <input type="checkbox" class="mgc mgc-info" checked /> Info <input type="checkbox" class="mgc mgc-warning" checked /> Warning <input type="checkbox" class="mgc mgc-danger" checked /> Danger

Radios

<input type="radio" name="radio3" class="mgr mgr-sm"/> Default <input type="radio" name="radio3" class="mgr mgr-primary" /> Primary <input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success <input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info <input type="radio" name="radio3" class="mgr mgr-warning" /> Warning <input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger

设置input大小的class

sm 是 small的缩写 , lg 是 large缩写

在 Checkbox中设置下面class

    mgc-sm mgc-lg

在 Radio Button中设置下面

    mgr-sm mgr-lg

改变颜色的 Class

在 Checkbox中设置下面class

    mgc-primary mgc-info mgc-success mgc-warning mgc-danger

在 Radio Button中设置下面
mgr-primary mgr-info mgr-success mgr-warning mgr-danger

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (2)

加载中
打分: 力荐
小而精!!!
2017/09/12 10:24
回复
举报
小弟调调软件作者
这是一个 CSS3 魔法 #Magic-Input#
2016/05/03 09:40
回复
举报
更多评论
暂无内容
发表了博客
2015/12/09 13:18

magic number

问题 Java中的magic number指什么,为什么有时候它会返回bad(这里指得是"bad magic number"错误,当装载applet的时候会发生)? 回答 Java applet编译后的class二进制文件(以class结尾)可以通过网络传输。有时候在传输文件的过程中,连接可能会被中断或受干扰,使得class文件装载失败;有时候当拷贝文 件到web服务器时,文件会被混淆或者发生磁盘错误。因此,JVM和class loader提供了特别的手段去验证类文件是否完整。一个预...

0
0
发表了博客
2018/02/28 12:29

Magic Squares

要求1: 在MagicSquqre.java文件中添加isLegalMagicSquare()函数,判断一个矩阵是否为MagicSquare。 MagicSquare说明:矩阵行数以及列数相同,且每行元素之和,每列元素之和以及对角线元素之和都应相等:                        1.我们需要从https://github.com/rainywang/Spring2018_HITCS_SC_Lab1/tree/master/P1获取1.txt, 2.txt, ..., 5.txt等5个测试文件,并将其添加到项目的指定路径:\src\P1\txt...

0
0
发表了博客
2015/05/06 14:28

Magic思路下的微信语音版"Magic"想法

背景 第一个: 过几天就是老妈生日了,想买套刀具,300块左右吧。从淘宝上搜了一下,找类别,输入条件,鼓捣了半分钟后,结果出来了。。。哦,好夸张啊,好多种选择,几百种总有了吧,各种不同的店,加上各种各样的刀的类型,各种不同的评价(全是好评,虽说不能不信吧,但又说不出来,到底谁的更好更适合),四个小时后,选择了一款(我承认我有时候会有选择恐惧症)。。。最悲催的是,太投入了,结果老板要求的东西,还没弄完...

0
1
发表了博客
2016/06/21 12:08

web magic

目标url:例子 package com.spider.test; import us.codecraft.webmagic.Page; import us.codecraft.webmagic.Site; import us.codecraft.webmagic.Spider; import us.codecraft.webmagic.processor.PageProcessor; public class chinataxProcessor implements PageProcessor { private Site site; public chinataxProcessor() { this.site = Site.me().setRetryTimes(3).setSleepTime(1000).setUseGzip(t...

0
0
发表了博客
2015/10/26 14:11

matlab magic

for n = 8:11     subplot(2,2,n-7)     surf(magic(n))     title(num2str(n))     axis off    view(30,45)     axis tight end 其中,生成幻方的matlab程序如下 function M = magicV2(n) %magicV2  magicV2 square. %   magicV2(N) is an N-by-N matrix constructed from the integers %   1 through N^2 with equal row, column, and diagonal sums. %   ...

1
0
2016/10/13 17:54

magic_quotes_gpc与magic_quotes_runtime的异同点

相同: 在PHP中,当magic_quotes_gpc和magic_quotes_runtime设置为on时,数据遇到单引号(')和双引号("")以及反斜线(\)、null时,会自动加上反斜线进行自动转义。所以,这两个数据魔法引用函数的作用体现在,当你的数据中存在单引号、双引号、反斜线这些字符,并且要写入数据库里面,同时又不想被过滤掉的时候,开启这两个函数进行自动转义,可以防止溢出。 这在对数据库的数据进行转移的时候非常有用。 注: 默认情况下,...

0
0
发表了博客
2015/08/17 10:42

Magic Potions

题目描述: 一堆东西,每次拿出两个不同的东西合。要最终合出来的最多。并且要贪心的买12 13 14.。。1n 23.。。 http://codeforces.com/gym/100430/attachments/download/2418/20092010-summer-petrozavodsk-camp-andrew-stankevich-contest-36-asc-36-en.pdf 题解: 首先要保证总个数是最多的。怎么算总个数?求一下maxelement,然后sum-maxelement和max值比较,大中小对应情况。 其次要贪心的去取,那么我们最直接的:取12 取...

0
0
发表了博客
2018/02/27 16:59

hdu4149 Magic Potion

Magic Potion Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total Submission(s): 488 Accepted Submission(s): 287 Problem Description In a distant magic world, there is a powerful magician aswmtjdsj. One day,aswmtjdsj decide to teach his prentice ykwd to make some magic potions. The magic potion is made by 8 kinds of materials, what aswmtjdsj need to do is to te...

0
0
发表了博客
2014/03/03 17:30

raw_input input

raw_input[prompt] #prompt是显示在控制台的提示文字 # 返回值是字符串 x = raw_input("x:") print type(x) x:1234 <type 'str'> input[prompt] #prompt是显示在控制台的提示文字 # 返回值是int x = input("x:") print type(x) x:1234 <type 'int'>

2
1
发表了博客
2015/07/28 13:56

Verson Magic problem

参考:http://blog.umbrellaj.com/blog/2013/03/15/trick-on-the-verson-magic-number-of-linux-kernel/ The version magic number of the kernel that being used to build the externel module has to be exactly the same as the kernel running on the device. It won’t be a problem if you build the module and kernel, then load both of them to the device. However, in this case, I would like to avoid to build ...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
2 评论
13 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部