•  14-07-2023
  •  | 
  •  

문제

I got this textbox where i can put a hex-color to change the color in my application:

 @Html.TextBoxFor(m => m.Page.Color)

Is there a, not to complicated, way to change the textbox into a colorpicker?

For simplicity i try to add farbtastic to the layout, here is the full page:

<!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>

The <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> Does not run so I suppose it works...However, no wheel is showing in my view, just the iputboxes. What could be wrong?

도움이 되었습니까?

해결책

Download Farbtastic

Include farbtastic.js and farbtastic.css into your solution. Then have this html and jquery on page - 

<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>

Then when you run -

enter image description here

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top