我得到了这个文本框,我可以在其中放置十六进制颜色来更改应用程序中的颜色:
@Html.TextBoxFor(m => m.Page.Color)
有没有一种不太复杂的方法将文本框更改为 颜色选择器?
为了简单起见,我尝试将 farbtastic 添加到布局中,这是完整的页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="~/Content/farbtastic.css" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/farbtastic.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#demo').hide();
$('#picker').farbtastic('#color');
});
</script>
</head>
<body>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 400px;">
<div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</form>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
不运行,所以我想它可以工作......但是,在我看来没有轮子,只有
输入框。可能出了什么问题?
最佳答案
将farbtastic.js 和farbtastic.css 包含到您的解决方案中。然后在页面上添加这个 html 和 jquery -
<html>
<head>
<title>Farbtastic</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').hide();
$('#picker').farbtastic('#color');
});
</script>
</head>
<body>
<h1>jQuery Color Picker: Farbtastic</h1>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 400px;">
<div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</form>
</body>
</html>
然后当你运行时 -
关于asp.net-mvc - MVC 项目中的颜色选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23433794/