القدرة على التعليق Iwork، هل هذا ممكن لتنفيذ استخدام JQuery

Question

Iwork لديه القدرة على تسليط الضوء على النص ثم علامة تعليق على هذا النص. يتم ربط التعليق بعد خطا إلى النص المميز.

أنا فضولي إذا كان هناك شيء من هذا القبيل يمكن تنفيذه في جيس. ما الذي حيرني هو: كيفية رسم خط ولديه تحديثه عندما يغير المستخدم النص B. كيفية تسليط الضوء على النص ولديه تمييز بطريقة أو بأخرى؟

معرف الحب لسماع أفكارك إذا كان ذلك ممكنا مع jQuery وأي أفكار أو إضافات لتوجيهني في الاتجاه الصحيح.

Answer 1

نعم، ليس هذا صعبا للغاية.

أولا - تحتاج إلى الحصول على الحدث المحدد

يتم إرسال الحدث المحدد إلى عنصر عندما يقوم المستخدم بإجراء اختيار نص داخله. يقتصر هذا الحدث على الحقول والصناديق.

على سبيل المثال، النظر في HTML:

<form>
  <input id="target" type="text" value="Hello there" />
</form>
<div id="other">
  Trigger the handler
</div>

يمكن ربط معالج الأحداث إدخال النص:

$('#target').select(function() {
  alert('Handler for .select() called.');
});

يرى: http://api.jquery.com/select/

ثانيا - تحتاج إلى إنشاء علامة

CSS.

<style>
body{font-size:12px; font-family:"Trebuchet MS";}
#content1{
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
</style>

(X)HTML

<a href="#" id="click">Something Here</a>
<div class="box">
<div id="content1">

<p><a href="#" id="close">Close</a></p>
</div>
</div>
</body>

كما ترون أنه مثال بسيط للغاية، ولكن استخدام هذا فقط حول لا حدود له!

الآن للحصول على رمز JQuery الذي يقوم بكل الاشياء غير المنفصلة. ما سأفعله هو عرض وإخفاء عنصر المحتوى 1 DIV. لأنني قمت بإنشاء رمز مسج أدناه، إلقاء نظرة ثم سأذهب من خلال ذلك.

$(document).ready(function(){

$('#content1').hide();

$('a').click(function(){
$('#content1').show('slow');
});

$('a#close').click(function(){
$('#content1').hide('slow');
})

});

كما ذكرت سابقا $ (المستند) .Ready (الوظيفة ()} هي وظيفة تنتظر حتى تكون الصفحة جاهزة للتلاعب بها قبل تنفيذ التعليمات البرمجية داخلها.

السطر التالي $ ('# content1'). إخفاء ()؛ يخفي المحتوى 1 div لبدء. لاحظ كيف تكون هناك علاقة بين المستقات و CSS في هذا يستخدم المعرف هو هذه الحالة، ولكن يمكن استخدام فئة بنفس الطريقة بالضبط، كوسيطة داخل الأقواس.

ثم ننتقل إلى القسم التالي من التعليمات البرمجية الذي "يظهر" DIV عند النقر فوق النص المرتبط. $ ('A) .Click (وظيفة () {})؛ يدع هذا وظيفة "النقر" ثم استدعاء تأثير "إظهار" على المحتوى 1 DIV.

اقرأ التعليمات البرمجية مرة أخرى وتأكد من حصولك على قبضة على المنطق. استغرق الأمر مني بعض الوقت للحصول على تعليق منه أيضا !!!

داخل هذا الحم الذي يتم عرضه ومخفه هناك رابط نص آخر سيخفه DIV.

$('a#close').click(function(){
$('#content1').hide('slow');
})

إذا نظرت إلى ذلك، يمكنك أن ترى أن عنصر "A" (رابط) مع معرف "إغلاق" سيحصل على تأثير "إخفاء" على المحتوى 1 DIV.

يرى: http://dreamweyverspot.com/jquery-show-and-hide-a-div/

ثالثا - ارسم خطك

تحميل البرنامج المساعد ل JQuery SVG - http://jquery.com/plugins/project/svg.

ارسم خطك

$("#example1").drawLine(0, 0, 220, 45);

يرى: http://www.openstudio.fr/library-for-simple-drawing-with.html.

هذا هو. فقط ضع كل شيء معا للحصول عليه كيف تريد ذلك.

Answer 2

ربما شيء بسيط مثل تلميح الأدوات يمكن أن يكون جوابك. لقد استخدمت qtip. البرنامج المساعد في الماضي، ولديه تأثيراتك التي تبحث عنها.

ألق نظرة على الموقع الإلكتروني:

http://craigsworks.com/projects/qtip/

إن استخدام QTIP سيعمل بشكل مثالي للحفاظ على المعلومات المطفأة فوق المستند.

فيما يتعلق بتحديد أجزاء معينة من نص المستندات، لدى TODD أفضل طريقة هناك، ووجدت هذا أيضا هذا السؤال:

اختيار النص في عنصر (أقرب إلى التسليط مع الماوس الخاص بك)

بمجرد تحديد النص الذي أخليفه في فترة id, واستخدام QTIP تلميح كخط (مشيرا إلى الفترة في السؤال). يمكن تصريح هذا على الطاير وجعل أي حجم، كما هو موضح هنا:

http://craigsworks.com/projects/qtip/docs/tutorials/#tips.

هذه طريقة مثيرة للاهتمام لاستخدام البرنامج المساعد QTIP، وآمل أن بعض هذه المعلومات ساعدتك.

ماركوس.

Answer 3

حدد TODD أساسا معظم كل ما عليك القيام به هنا بصرف النظر عن كتابة التطبيق لك. تحتاج إلى وجود قائمتين في الذاكرة؛ إحدى التعليقات وواحدة من العلامات، وسيلة لربط الاثنين في دوم (معرفات فريدة). أود أن أقترح التحقق من مشاركات مماثلة حول كيفية نقل عنصر بالنسبة إلى موضع التنقل في النافذة. ستحتاج إلى طريقة تحديد العلامات التي تكون مرئية في أي وقت معين، وأظن أنك تستطيع أن تفعل ذلك بأحد وظائف موضع JQuery القياسية؛ هناك حاجة إلى نفس رسم خط بين عنصرين. غلة البحث البسيطة http://api.jquery.com/position/. وبعد بمجرد تحديد العلامات التي تكون مرئية، يمكنك بعد ذلك إعادة ملء عنصر التعليقات واجهة المستخدم مع التعليقات المناسبة، ابحث عن مواقعها، ورسم خطا من العنصر المعدل إلى عنصر التعليق. إذا كنت بحاجة إلى أن تكون قادرا على تحرير التعليقات أيضا، وأنت تتوقع أن تنقذها دون تقديم نموذج، فستحتاج إلى قاعدة بيانات، ودعوة AJAX للاستمرار في التعليقات بمجرد الانتهاء من التحرير.

إذا كنت تتحدث عن حقل إدخال النص، فسيكون أكثر صعوبة كثيرا ولا أعتقد أنه يمكنك القيام بذلك بأي من عناصر الإدخال القياسية بسهولة للغاية. وأود أن تحقق من أحد محرري النص الأثرياء هناك قد تعرض بعض هذه الوظائف (YUI؟) ودمجها مع البرنامج المساعد الخاص بك.

Answer 4

فيما يتعلق بسحب خطوط، أتيحت الشفرة من سؤالي والإجابة الخاصة بي

كيفية رسم خط بين الغم والقابلية؟

طبقات جزء العلامة سهلة بما فيه الكفاية عندما يمكنك العمل مع JQuery Field Selection Plugin

آمل أن يساعد.