|
 |
| |
ผมเอา source code จากเพจนี้มาใช้ แต่ทำไม ฟังก์ชันมาไม่ครบก็ไม่รู้ครับ ช่วยดูให้หน่อยครับผม |
| |
 |
|
|
 |
 |
|
ไป copy มา แล้วเอาของเค้ามาครบรึเปล่า ดูดีๆ ใช้ google chrome debug ดูก็ได้ ง่ายกว่าไปเดาเอาว่ามัน error อะไร
Code (PHP)
<script type="text/javascript" src="js/jquery-1.4.4.js" ></script>
<script type="text/javascript" src="js/jquery-selectBeautify.js" ></script>
<link rel="stylesheet" href="css/selectBeautify.css" type="text/css" />
Code (JavaScript)
$('#demo-select').selectBeautify({
height: 26,
width: 150,
className: 'beauty-select-v'
});
|
 |
 |
 |
 |
| Date :
2013-12-11 13:50:54 |
By :
mangkunzo |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 1 เขียนโดย : mangkunzo เมื่อวันที่ 2013-12-11 13:50:54
รายละเอียดของการตอบ ::
คิดว่าครบนะครับ แต่ยังไม่ได้เลยครับผม
Code (PHP)
<html><head>
<title>select beautify </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="CH">
<meta name="Keywords" content=" select beautify ">
<meta name="Description" content="select beautify ">
<script type="text/javascript" src="http://mrhack.sinaapp.com/static/codecanyon/selectBeautify/js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://mrhack.sinaapp.com/static/codecanyon/selectBeautify/js/jquery-selectBeautify.js"></script>
<link rel="stylesheet" href="http://mrhack.sinaapp.com/static/codecanyon/selectBeautify/css/selectBeautify.css" type="text/css">
<style type="text/css">
body{
background:url('image/bg.png');
color:#fff;
font-size:16px;
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif;
}
pre{margin:0;padding:0;}
.container{width:960px;margin:0 auto;}
.container .header{
text-align:center;
line-height:40px;
padding:20px;
text-shadow: 2px 2px 0 transparent, 4px 4px 0 #101010;
font-weight: bold;
font-size: 38px;
font-family: "Terminal Dosis", sans-serif;;
}
.container .header em{
float:right;
font-size:20px;
}
.container .wrap ,.container .select-maker , .container .footer{
border-radius: 10px;
color: #333;
background-color: #fff;
padding: 20px;
margin-bottom:20px;
}
.container .select-maker dl{float:left;width:400px;}
.container .select-maker dd{margin:10px;clear:both;}
.container .select-maker dd .l{float:left;width:200px;}
.container .select-maker dd input ,.container .select-maker dd select{height:26px;line-height:26px;}
.wrap dl{clear:both;height:30px;margin-bottom:20px;}
.wrap dt , .wrap dd{float:left; width:200px;}
.wrap .view-code{width:50px;float:right;cursor:pointer;color:blue;}
.wrap .code{clear:both;float:none;display:none;background:#ccc;border-radius:5px;width:100%;}
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
h2{margin-bottom:10px;}
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<ol>
<li>1. Include js and css file of jQuery and BeautySelect plugin like this.<br>
<pre> <font face="Consolas">
<font color="#000000"> </font><font color="#0000ff"><script </font><font color="#ff0000">type</font><font color="#0000ff">=</font><font color="#ff00ff">"text/javascript" </font><font color="#ff0000">src</font><font color="#0000ff">=</font><font color="#ff00ff">"js/jquery-1.4.4.js" </font><font color="#0000ff">></script></font>
<font color="#000000"> </font><font color="#0000ff"><script </font><font color="#ff0000">type</font><font color="#0000ff">=</font><font color="#ff00ff">"text/javascript" </font><font color="#ff0000">src</font><font color="#0000ff">=</font><font color="#ff00ff">"js/jquery-selectBeautify.js" </font><font color="#0000ff">></script></font>
<font color="#000000"> </font><font color="#0000ff"><link </font><font color="#ff0000">rel</font><font color="#0000ff">=</font><font color="#ff00ff">"stylesheet" </font><font color="#ff0000">href</font><font color="#0000ff">=</font><font color="#ff00ff">"css/selectBeautify.css" </font><font color="#ff0000">type</font><font color="#0000ff">=</font><font color="#ff00ff">"text/css" </font><font color="#0000ff">/></font>
</font>
</pre>
</li>
<li>2. With select element in document. <br>
<pre> <font face="Consolas">
<font color="#0000ff"><select></font>
<font color="#000000"> </font><font color="#0000ff"><option></font><font color="#000000">Friends</font><font color="#0000ff"></option></font>
<font color="#000000"> </font><font color="#0000ff"><option </font><font color="#ff0000">disabled</font><font color="#0000ff">></font><font color="#000000">Family</font><font color="#0000ff"></option></font>
<font color="#000000"> </font><font color="#0000ff"><option </font><font color="#ff0000">selected</font><font color="#0000ff">=</font><font color="#800080">true</font><font color="#0000ff">></font><font color="#000000">Acquaintances</font><font color="#0000ff"></option></font>
<font color="#000000"> </font><font color="#0000ff"><option></font><font color="#000000">stranger</font><font color="#0000ff"></option></font>
<font color="#000000"> </font><font color="#0000ff"><option></font><font color="#000000">Notifications</font><font color="#0000ff"></option></font>
<font color="#0000ff"></select></font>
</font>
</pre>
</li>
<li>3. Use plugin to init select element. <br>
<pre> <font face="Consolas">
<font color="#800000">$(</font><font color="#ff00ff">'#demo-select'</font><font color="#800000">).selectBeautify({</font>
<font color="#800000">height: </font><font color="#800080">26</font><font color="#800000">,</font>
<font color="#800000">width: </font><font color="#800080">150</font><font color="#800000">,</font>
<font color="#800000">className: </font><font color="#ff00ff">'beauty-select-v'</font>
<font color="#800000">});</font>
</font>
</pre>
</li>
<li>3. This is the result. <br>
<div style="padding: 10px 60px;">
original select : <select>
<option>Friends</option>
<option disabled="">Family</option>
<option selected="true">Acquaintances</option>
<option>stranger</option>
<option>Notifications</option>
</select>
</div>
<div style="padding: 10px 60px;">
result with plugin:
<div class="beauty-select-plugin beauty-select-v beauty-select-hover" style="vertical-align: middle; display: inline-block; width: 150px; line-height: 24px; zoom: 1; z-index: 0; position: static;"><div class="beauty-select-curr" style="height: 24px;"><a href="javascript:void(0);" hidefocus="true" class="beauty-select-sprite"></a><label title="Notifications" style="padding-left: 3px; width: 98px; overflow: hidden;">Notifications</label></div><div class="beauty-select-list" style="position: absolute; left: 0px; zoom: 1; z-index: 1; cursor: default; height: 0px; width: 148px; display: none; bottom: 26px; overflow-x: hidden; overflow-y: visible;"><ul style="width: 100%; position: absolute; height: 120px; overflow-y: auto; overflow-x: hidden; top: 0px;"><li index="0" title="" class="beauty-select-opt"><label>Friends</label></li><li index="1" title="" class="beauty-select-opt beauty-select-opt-disabled" disabled="disabled"><label>Family</label></li><li index="2" title="" class="beauty-select-opt"><label>Acquaintances</label></li><li index="3" title="" class="beauty-select-opt"><label>stranger</label></li><li index="4" title="" class="beauty-select-opt hover"><label>Notifications</label></li></ul></div></div><select id="demo-select" style="display: none;">
<option>Friends</option>
<option disabled="">Family</option>
<option selected="true">Acquaintances</option>
<option>stranger</option>
<option>Notifications</option>
</select>
<script language="javascript">
<!--
$('#demo-select').selectBeautify({
height: 26,
width: 150,
className: 'beauty-select-v'
});
//-->
</script>
</div>
</li>
</ol>
</div>
</div>
<script type="text/javascript">
<!--
$(function(){
var getFormData = function($form){
var f = $form.get(0),
result = {};
$form.find('input,textarea,select').each(function(i , item){
var name = item.name,
val = item.value;
val = $(item).val() == $(item).attr('default-value')? '' : val;
if(item.tagName.toLowerCase() == 'input'){
switch(item.type){
case 'text':
result[name] = val;
break;
case 'checkbox':
if(item.checked){
result[name] = result[name]? result[name] + ',' + val : val;
}
break;
case 'radio':
if(item.checked){
result[name] = val;
}
}
}else{
result[name] = val;
}
});
return result;
};
$('#s1').selectBeautify({
height: 26
}).change(function(){
$(this).closest('dl').find('.desc').html('You have selected ' + $(this).val());
}).appendTo($('#s1').parent().prev()).show();
$('#s2').selectBeautify({
height: 26,
width: 150,
className: 'beauty-select-triangle'
}).change(function(){
$(this).closest('dl').find('.desc').html('You have selected ' + $(this).val());
}).appendTo($('#s2').parent().prev()).show();
$('#s3').selectBeautify({
height: 26, // set the height of wrap
width: 180, // set wrap width
imageWidth: 18, // set image width
imageHeight: 12, // set image height
withImage: true, // this means there is a backgroun image for options
maxHeight: 150, // set max height of list wrap
className: 'beauty-select-v' // style
}).change(function(){
$(this).closest('dl').find('.desc').html('You have selected ' + $(this).val());
}).appendTo($('#s3').parent().prev()).show();
$('.view-code').click(function(){
var $next = $(this).closest('dl').next();
if($next.length){
$next.slideToggle(400);
}
});
$('#reset').click(function(){
var data = getFormData($('#form-data')),
digit = /^\s*(\d+)\s*$/,
value;
for(var key in data){
value = data[key];
if(digit.test(value)){
value = parseInt(value.match(digit)[1]);
}
data[key] = value;
}
$('#s4').selectBeautify(data);
});
});
//-->
</script>
</body></html>
|
| |
|
|
| |
| Date :
2013-12-11 13:55:35 |
By :
หมูน้อย |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
