Question

我有了这个文本框，我可以在其中添加六角颜色来改变应用程序中的颜色：

 @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>&copy; @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> 不运行所以我认为它的工作原理......但是，在我的视图中没有显示轮子，只是 iputboxes。可能有什么不对？

Answer 1

下载Farbtastic

在您的解决方案中包含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>

然后当你跑 -

enter image description here

MVC项目中的colorpicker

1 个答案: