-1
html 페이지의 요소 id를 jquery 함수에 전달하려고합니다. 은 쉽게 들리지만 어떤 이유로 작동하지 않습니다.
이 코드 조각 파일에 이름 func.js javascript에서 전달할 요소 id가
function getGauge(gname){
var labels = { visible: true, position: 'inside' },
theme = getDemoTheme();
//Create jqxGauge
$('#'+gname).jqxGauge({
width:'200px', height:'200px',
ranges: [{ startValue: 0, endValue: 90, style: { fill: '#e2e2e2', stroke: '#e2e2e2' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
{ startValue: 90, endValue: 140, style: { fill: '#f6de54', stroke: '#f6de54' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
{ startValue: 140, endValue: 180, style: { fill: '#db5016', stroke: '#db5016' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
{ startValue: 180, endValue: 220, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }
],
cap: { radius: 0.04 },
caption: { offset: [0, 0], value: 'jQWidgets', position: 'bottom' },
value: 0,
style: { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' },
animationDuration: 1500,
colorScheme: 'scheme04',
labels: labels,
ticksMinor: { interval: 5, size: '5%' },
ticksMajor: { interval: 10, size: '10%' }
});
// set gname's value.
$('#'+gname).jqxGauge('setValue', 39);
};
코드의이 작품은 내 HTML 파일입니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="jQuery Gauge, Gauge Widget, Radial Gauge" />
<meta name="description" content="Using the toolbox in the right hand side of the jqxGauge you can easy switch through different properties which are changing gauge's appearance." />
<title id='Description'>This sample demonstrates the basic Gauge settings.</title>
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../scripts/gettheme.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="./func.js"></script>
<script type="text/javascript">
$(document).ready(function(){
getGauge("gauge");
); {
</script>
</head>
<body class='default'>
<div class="demo-gauge" style="width: 600px;">
<div id="gauge" style="float: left;"></div>
<div id="expander" style="float: right;">
<div>
Options
</div>
<div>
<ul style="list-style: none; padding: 0px; margin: 10px;">
<li style="padding: 3px; font-family: Verdana; font-size: 12px;">
<div id="showLabelsCheckbox">Show labels</div>
<ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px;">
<li>
<div id="insideRadio">Inside the gauge</div>
</li>
<li>
<div style="margin-top: 5px;" id="outsideRadio">Outside the gauge</div>
</li>
</ul>
</li>
<li style="padding: 3px; font-family: Verdana; font-size: 12px;">
<div id="showRangesCheckbox">Show ranges</div>
</li>
<li style="padding: 3px; font-family: Verdana; font-size: 12px;">
<div id="showBorderCheckbox">Show border</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
나는, 이것에 대한 쉬운 대답은있을거야 그냥 같이한다, 그들은 코멘트에 말했듯이
도움이
당신이 당신의 HTML에서 JS 코드에서 구문 오류를 발견 했습니까? '); {' –
네.'.ready' 함수에 에러가 있습니다. – Rodik
맞습니다. 이 바뀌 었습니다. 이제는 잘 작동합니다. 바보 같은 실수를했습니다 ... –