1

jQuery カラー ピッカーを自分の Web サイトに配置しようとしています。lindekleiv によるカラー ピッカーが機能していません。私が持っているコードは次のとおりです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$('input#myColorPicker').colorPicker({
      format: 'hex',
      size: 100
});
</script>

ページの完全なコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="../css/mainpage.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Josefin+Slab:400,700,700italic,400italic' rel='stylesheet' type='text/css' />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.ui.colorPicker.min.js"></script>
<script>
$(function() { // Wait for page to load
    $('#myColorPicker').colorPicker({
        format: 'hex',
        size: 100
    });
});
</script>
</head>

<body>

<div id="head">
<h1><span>Welcome to CodeTowel&copy;.</span></h1>
<h1>The place to code, with help from Towel!</h1>
</div>

<p>Snippets are bits of code that you can download and put into your webpage. We have seperate snippets for the <code>&lt;code&gt;</code>, <code>&lt;pre&gt;</code>, and <code>&lt;kbd&gt;</code> elements.</p>
<p>Don't like the colors for the current website? Change 'em!</p>
<input id="myColorPicker" type="text" />
</body>
</html>
4

1 に答える 1

2

あなたのコードには、これが機能しなくなるいくつかの問題があります...ここにそれらがあります：

  1. プラグインには jQuery UI が必要です - それをロードする必要があります
  2. プラグインを含む実際の Javascript ファイルを読み込んでいない
  3. スタイルシート ファイルを読み込んでいません
  4. 使用する前にページがロードされるのを待つ必要があります.colorPicker
  5. これはそれほど重要ではありませんがinput#myColorPicker、セレクター ( ) を次のように変更することをお勧めします。#myColorPicker

したがって、これらの変更をすべて行った後の最終的なコードは次のとおりです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script>
<script src="jquery.ui.colorPicker.min.js"></script>
<link rel="stylesheet" href="css/jquery.ui.colorPicker.css">
<script>
$(function() { // wait for page to load
    $("#myColorPicker").colorPicker({
        format: 'hex',
        size:   100
    });
});
</script>

次に、HTML でカラー ピッカーを配置する場所に、

<input type="text" id="myColorPicker" name="color" />
于 2013-07-15T08:56:37.393 に答える