المعلومات | الكاتب: | | اللقب: | Admin | الرتبه: | | الصورة الرمزية | | البيانات | الجنس : | | عدد المساهمات : | 1357 | السٌّمعَة : | 36 | تاريخ التسجيل : | 28/08/2014 | الموقع : | بيت الجزائر لكل العرب |
الإتصالات | الحالة: | | وسائل الإتصال: | |
| موضوع: html لجعل النص ملون من تعديلي الأحد 10 أبريل 2016 - 13:42 |
|
html لجعل النص ملون من تعديليصورة للمعاينة: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
طريقة تركيب الكود يوضع في صفحات الــــــ html - الكود:
-
<title>نص ملون</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style type="text/css"> body { font-family: Arial, sans-serif } .title { font-size: 20px; border-bottom: 1px solid #aaa; } .content { font-size: 13px; color: #333; padding: 20px; overflow: hidden; } .content input { border: 1px solid #aaa } .content textarea { border: 1px solid #aaa; width: 90%; height: 100px; } .miniColors-trigger { height: 22px; width: 22px; background: url(http://i.imgur.com/KKaXy.png) center no-repeat; vertical-align: middle; margin: 0 .25em; display: inline-block; outline: none; } .miniColors-selector { position: absolute; width: 175px; height: 150px; background: #FFF; border: solid 1px #BBB; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25); box-shadow: 0 0 6px rgba(0, 0, 0, .25); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 5px; z-index: 999999; } .miniColors-selector.black { background: #000; border-color: #000; } .miniColors-colors { position: absolute; top: 5px; left: 5px; width: 150px; height: 150px; background: url(http://i.imgur.com/Ekxy2.png) center no-repeat; cursor: crosshair; } .miniColors-hues { position: absolute; top: 5px; left: 160px; width: 20px; height: 150px; background: url(http://i.imgur.com/JmyPi.png) center no-repeat; cursor: crosshair; } .miniColors-colorPicker { position: absolute; width: 11px; height: 11px; background: url(http://i.imgur.com/j36Lh.gif) center no-repeat; } .miniColors-huePicker { position: absolute; left: -3px; width: 26px; height: 3px; background: url(http://i.imgur.com/QJ574.gif) center no-repeat; } </style> <script type="text/javascript"> jQuery && function(d) { d.extend(d.fn, {miniColors:function(k, i) { var B = function(a, b) { var e = l(a.val()); e || (e = "ffffff"); var c = r(e), g = d('<a class="miniColors-trigger" style="background-color: #' + e + '" href="#"></a>'); g.insertAfter(a); a.addClass("miniColors").data("original-maxlength", a.attr("maxlength") || null).data("original-autocomplete", a.attr("autocomplete") || null).data("letterCase", "uppercase").data("trigger", g).data("hsb", c).data("change", b.change ? b.change : null).attr("maxlength", 7).attr("autocomplete", "off").val("#" + m(e, b.letterCase)); b.readonly && a.prop("readonly", !0); b.disabled && s(a); g.bind("click.miniColors", function(b) { b.preventDefault(); "" === a.val() && a.val("#"); t(a) }); a.bind("focus.miniColors", function() { "" === a.val() && a.val("#"); t(a) }); a.bind("blur.miniColors", function() { var b = l(a.val()); a.val(b ? "#" + m(b, a.data("letterCase")) : "") }); a.bind("keydown.miniColors", function(b) { 9 === b.keyCode && j(a) }); a.bind("keyup.miniColors", function() { o(a) }); a.bind("paste.miniColors", function() { setTimeout(function() { o(a) }, 5) }) }, s = function(a) { j(a); a.prop("disabled", !0).data("trigger").css("opacity", 0.5) }, t = function(a) { if(a.prop("disabled")) { return!1 } j(); var b = d('<div class="miniColors-selector"></div>'); b.append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"></div></div>').append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>').css({top:a.is(":visible") ? a.offset().top + a.outerHeight() : a.data("trigger").offset().top + a.data("trigger").outerHeight(), left:a.is(":visible") ? a.offset().left : a.data("trigger").offset().left, display:"none"}).addClass(a.attr("class")); var e = a.data("hsb"); b.find(".miniColors-colors").css("backgroundColor", "#" + p(n({h:e.h, s:100, b:100}))); var c = a.data("colorPosition"); c || (c = u(e)); b.find(".miniColors-colorPicker").css("top", c.y + "px").css("left", c.x + "px"); (c = a.data("huePosition")) || (c = v(e)); b.find(".miniColors-huePicker").css("top", c.y + "px"); a.data("selector", b).data("huePicker", b.find(".miniColors-huePicker")).data("colorPicker", b.find(".miniColors-colorPicker")).data("mousebutton", 0); d("BODY").append(b); b.fadeIn(100); b.bind("selectstart", function() { return!1 }); d(document).bind("mousedown.miniColors touchstart.miniColors", function(b) { a.data("mousebutton", 1); d(b.target).parents().andSelf().hasClass("miniColors-colors") && (b.preventDefault(), a.data("moving", "colors"), w(a, b)); d(b.target).parents().andSelf().hasClass("miniColors-hues") && (b.preventDefault(), a.data("moving", "hues"), x(a, b)); d(b.target).parents().andSelf().hasClass("miniColors-selector") ? b.preventDefault() : d(b.target).parents().andSelf().hasClass("miniColors") || j(a) }); d(document).bind("mouseup.miniColors touchend.miniColors", function(b) { b.preventDefault(); a.data("mousebutton", 0).removeData("moving") }).bind("mousemove.miniColors touchmove.miniColors", function(b) { b.preventDefault(); 1 === a.data("mousebutton") && ("colors" === a.data("moving") && w(a, b), "hues" === a.data("moving") && x(a, b)) }) }, j = function(a) { a || (a = ".miniColors"); d(a).each(function() { var a = d(this).data("selector"); d(this).removeData("selector"); d(a).fadeOut(100, function() { d(this).remove() }) }); d(document).unbind(".miniColors") }, w = function(a, b) { var e = a.data("colorPicker"); e.hide(); var c = {x:b.pageX, y:b.pageY}; b.originalEvent.changedTouches && (c.x = b.originalEvent.changedTouches[0].pageX, c.y = b.originalEvent.changedTouches[0].pageY); c.x = c.x - a.data("selector").find(".miniColors-colors").offset().left - 5; c.y = c.y - a.data("selector").find(".miniColors-colors").offset().top - 5; -5 >= c.x && (c.x = -5); 144 <= c.x && (c.x = 144); -5 >= c.y && (c.y = -5); 144 <= c.y && (c.y = 144); a.data("colorPosition", c); e.css("left", c.x).css("top", c.y).show(); e = Math.round(0.67 * (c.x + 5)); 0 > e && (e = 0); 100 < e && (e = 100); c = 100 - Math.round(0.67 * (c.y + 5)); 0 > c && (c = 0); 100 < c && (c = 100); var d = a.data("hsb"); d.s = e; d.b = c; q(a, d, !0) }, x = function(a, b) { var e = a.data("huePicker"); e.hide(); var c = {y:b.pageY}; b.originalEvent.changedTouches && (c.y = b.originalEvent.changedTouches[0].pageY); c.y = c.y - a.data("selector").find(".miniColors-colors").offset().top - 1; -1 >= c.y && (c.y = -1); 149 <= c.y && (c.y = 149); a.data("huePosition", c); e.css("top", c.y).show(); e = Math.round(2.4 * (150 - c.y - 1)); 0 > e && (e = 0); 360 < e && (e = 360); c = a.data("hsb"); c.h = e; q(a, c, !0) }, q = function(a, b, e) { a.data("hsb", b); var c = p(n(b)); e && a.val("#" + m(c, a.data("letterCase"))); a.data("trigger").css("backgroundColor", "#" + c); a.data("selector") && a.data("selector").find(".miniColors-colors").css("backgroundColor", "#" + p(n({h:b.h, s:100, b:100}))); a.data("change") && c !== a.data("lastChange") && (a.data("change").call(a.get(0), "#" + c, n(b)), a.data("lastChange", c)) }, o = function(a) { a.val("#" + y(a.val())); var b = l(a.val()); if(!b) { return!1 } var b = r(b), e = a.data("hsb"); if(b.h === e.h && b.s === e.s && b.b === e.b) { return!0 } e = u(b); d(a.data("colorPicker")).css("top", e.y + "px").css("left", e.x + "px"); a.data("colorPosition", e); e = v(b); d(a.data("huePicker")).css("top", e.y + "px"); a.data("huePosition", e); q(a, b); return!0 }, m = function(a, b) { return"lowercase" === b ? a.toLowerCase() : "uppercase" === b ? a.toUpperCase() : a }, u = function(a) { var b = Math.ceil(a.s / 0.67); 0 > b && (b = 0); 150 < b && (b = 150); a = 150 - Math.ceil(a.b / 0.67); 0 > a && (a = 0); 150 < a && (a = 150); return{x:b - 5, y:a - 5} }, v = function(a) { a = 150 - a.h / 2.4; 0 > a && (h = 0); 150 < a && (h = 150); return{y:a - 1} }, y = function(a) { return a.replace(/[^A-F0-9]/ig, "") }, l = function(a) { a = y(a); if(!a) { return null } 3 === a.length && (a = a[0] + a[0] + a[1] + a[1] + a[2] + a[2]); return 6 === a.length ? a : null }, n = function(a) { var b, e, c; b = Math.round(a.h); var d = Math.round(255 * a.s / 100), a = Math.round(255 * a.b / 100); if(0 === d) { b = e = c = a }else { var d = (255 - d) * a / 255, f = (a - d) * (b % 60) / 60; 360 === b && (b = 0); 60 > b ? (b = a, c = d, e = d + f) : 120 > b ? (e = a, c = d, b = a - f) : 180 > b ? (e = a, b = d, c = d + f) : 240 > b ? (c = a, b = d, e = a - f) : 300 > b ? (c = a, e = d, b = d + f) : 360 > b ? (b = a, e = d, c = a - f) : c = e = b = 0 } return{r:Math.round(b), g:Math.round(e), b:Math.round(c)} }, p = function(a) { var b = [a.r.toString(16), a.g.toString(16), a.b.toString(16)]; d.each(b, function(a, c) { 1 === c.length && (b[a] = "0" + c) }); return b.join("") }, r = function(a) { var b = a, b = parseInt(-1 < b.indexOf("#") ? b.substring(1) : b, 16), a = b >> 16, d = (b & 65280) >> 8, b = b & 255, c = {h:0, s:0, b:0}, g = Math.min(a, d, b), f = Math.max(a, d, b), g = f - g; c.b = f; c.s = 0 !== f ? 255 * g / f : 0; c.h = 0 !== c.s ? a === f ? (d - b) / g : d === f ? 2 + (b - a) / g : 4 + (a - d) / g : -1; c.h *= 60; 0 > c.h && (c.h += 360); c.s *= 100 / 255; c.b *= 100 / 255; 0 === c.s && (c.h = 360); return c }; switch(k) { case "readonly": return d(this).each(function() { d(this).hasClass("miniColors") && d(this).prop("readonly", i) }), d(this); case "disabled": return d(this).each(function() { d(this).hasClass("miniColors") && (i ? s(d(this)) : d(this).prop("disabled", !1).data("trigger").css("opacity", 1)) }), d(this); case "value": if(void 0 === i) { if(!d(this).hasClass("miniColors")) { break } var z = d(this), A = l(z.val()); return A ? "#" + m(A, z.data("letterCase")) : null } d(this).each(function() { d(this).hasClass("miniColors") && (d(this).val(i), o(d(this))) }); return d(this); case "destroy": return d(this).each(function() { if(d(this).hasClass("miniColors")) { var a = d(this); j(); a = d(a); a.data("trigger").remove(); a.attr("autocomplete", a.data("original-autocomplete")).attr("maxlength", a.data("original-maxlength")).removeData().removeClass("miniColors").unbind(".miniColors"); d(document).unbind(".miniColors") } }), d(this); default: return k || (k = {}), d(this).each(function() { "input" === d(this)[0].tagName.toLowerCase() && !d(this).data("trigger") && B(d(this), k, i) }), d(this) } }}) }(jQuery); </script> <script type="text/javascript"> var vcolor1 = {r:0, g:0, b:0}, vcolor2 = {r:0, g:0, b:0}; jQuery(function() { jQuery("#color1").miniColors({change:function(a, b) { vcolor1 = b; generate() }}); jQuery("#color2").miniColors({change:function(a, b) { vcolor2 = b; generate() }}); jQuery(".content input,.content textarea,.content select").change(function() { generate() }); generate() }); function color_dif(a, b) { return Math.abs(a.r - b.r) + Math.abs(a.g - b.g) + Math.abs(a.b - b.b) } function rgb_to_hex(a) { var b = "0123456789abcdef".split(""); return b[Math.floor(a.r / 16)] + b[Math.floor(a.r % 16)] + b[Math.floor(a.g / 16)] + b[Math.floor(a.g % 16)] + b[Math.floor(a.b / 16)] + b[Math.floor(a.b % 16)] } function t_color(a, b, f) { return{r:Math.round(a.r + f * (b.r - a.r)), g:Math.round(a.g + f * (b.g - a.g)), b:Math.round(a.b + f * (b.b - a.b))} } function t_size(a, b, f) { return Math.round(a + f * (b - a)) } function generate() { var a = jQuery("#src").val(), b = (a.match(/\s/g) || []).length; if(b = a.length - b) { var f = {}, h = {}, e; if(jQuery("#color-act").is(":checked")) { var g = jQuery("#color-sharp").val(); h[0] = "[color=#" + rgb_to_hex(vcolor1) + "]"; f[0] = '<span style="color:#' + rgb_to_hex(vcolor1) + '">'; var c = vcolor1, d; for(e = 1;e < b;e++) { d = t_color(vcolor1, vcolor2, e / b), color_dif(d, c) >= g && (c = d, h[e] = "[/color][color=#" + rgb_to_hex(d) + "]", f[e] = '</span><span style="color:#' + rgb_to_hex(d) + '">') } h[b] = "[/color][b]" }else { g = jQuery("#size-sharp").val(); c = parseInt(jQuery("#size1").val()); d = parseInt(jQuery("#size2").val()); h[0] = "[size=" + c + "]"; f[0] = '<span style="font-size:' + c + 'px">'; var i = c, j; for(e = 1;e < b;e++) { j = t_size(c, d, e / b), Math.abs(j - i) >= g && (i = j, h[e] = "[/size][size=" + j + "]", f[e] = '</span><span style="font-size:' + j + 'px">') } h[b] = "[/size][b]" } f[b] = "</span>"; c = g = ""; for(e = d = 0;d < b;) { (i = a.match(/^\s*/)[0].length) ? (g += a.substr(0, i), c += a.substr(0, i).replace(/\n/g, "<br>"), a = a.substr(i), e += i) : (h[d] && (g += h[d]), f[d] && (c += f[d]), g += a.substr(0, 1), c += a.substr(0, 1).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), a = a.substr(1), d += 1, e++) } h[d] && (g += h[d]); g += a; f[d] && (c += f[d]); c += a.replace(/\n/g, "<br>"); jQuery("#result").val(g); jQuery("#dst").html(c) }else { jQuery("#result").val(""), jQuery("#dst").html("") } }; </script> <div id="content"> <div id="color"> <div class="title"> النص الملون </div> <div class="content"> <label>نشط <input checked="checked" id="color-act" onclick="jQuery('#size-act').attr('checked','checked');jQuery('#size,#color').slideToggle(500);generate()" type="checkbox" /></label> de <input id="color1" size="6" autocomplete="on" maxlength="10" value="#000000" type="text" /> à <input id="color2" size="6" autocomplete="on" maxlength="10" value="#000000" type="text" />مع الدقة في <select id="color-sharp"> <option value="1">1 couleur</option> <option value="2">2 couleurs</option> <option value="3">3 couleurs</option> <option value="4">4 couleurs</option> <option value="5">5 couleurs</option> <option value="10" selected="selected">10 couleurs</option> <option value="20">20 couleurs</option> <option value="30">30 couleurs</option> <option value="40">40 couleurs</option> <option value="50">50 couleurs</option> <option value="75">75 couleurs</option> <option value="100">100 couleurs</option> <option value="150">150 couleurs</option> <option value="200">200 couleurs</option> <option value="300">300 couleurs</option> <option value="400">400 couleurs</option> <option value="500">500 couleurs</option> </select> </div> </div> <div id="size" style="display:none"> <div class="title"> Dégradé de taille </div> <div class="content"> <label>Activé <input id="size-act" onclick="jQuery('#color-act').attr('checked','checked');jQuery('#size,#color').slideToggle(500);generate()" type="checkbox" /></label> من <select id="size1"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="'4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12" selected="selected">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> </select> إلى <select id="size2"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="'4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12" selected="selected">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> </select> مع دقة <select id="size-sharp"> <option value="1">1 pixel</option> <option value="2">2 pixels</option> <option value="3">3 pixels</option> <option value="4">4 pixels</option> <option value="5">5 pixels</option> <option value="10">10 pixels</option> </select> </div> </div> <div class="title"> النص محل الكتابة </div> <div class="content"> <textarea id="src"></textarea> </div> <div class="title"> النتيجة </div> <div class="content"> <textarea id="result" readonly="true"></textarea> </div> <div class="title"> معاينة </div> <div class="content" id="dst"> </div> </div> ملاحظة هامة : الكود من تعديلي و يمنع منعا باتا نقله دون ذكر المصدر |
|