Anyone know how to work with jquery and niceedit easyui
Not retrieve the text from the database
<div id="sample">
<script type="text/javascript" src="../inc/js/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({
iconsPath:'../inc/js/nicEditorIcons.gif',
uploadURI : 'UploadArquivo.php',
}).panelInstance('textareaId');
});
</script>
<?
<div class="fitem">
<textarea id="textareaId" name="texto" style="width: 650px; height: 300px;"></textarea>
</div>
echo "</div>";
Related
The code below tries to implements a button action in jQueryMobile,but it is not working for me. Please let me know where I am wrong.Everything is written in a HTML file.
I am facing some problem in providing my code here. Here is what I am trying.
In standard HTML format, I am writing the below code between script tags
$('#theButton').click(function() {
alert('The Button has been clicked,');
});
And in the body tag ---
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
But the action is not getting called.
EDIT: Please try the code below:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>
I would like to create some resizeable and draggable div tags contain textarea tags with jQueryUI.And I also want to use nicEdit to format text inside these textarea tags.But i can't combine them,maybe.I can't edit text if i use $(element).resizeable().draggable().Here is my code:
<html>
<head>
<title>Trouble using jquery ui resizeable, draggable and nicEdit</title>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<script src="nicEdit/nicEdit.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var btnlist=['fontSize','fontFamily',
'bold','italic','underline','strikeThrough',
'left','center','right','justify',
'ol','ul','hr',
'indent','outdent',
'forecolor','bgcolor',
'subscript','superscript','removeformat'];
var myNicEditor = new nicEditor({iconsPath : 'nicEdit/nicEditorIcons.gif',buttonList :btnlist });
myNicEditor.setPanel('myNicEdit');
function ID()
{
var id="id";
var random_number=Math.round(Math.random()*1000000);
id+=random_number;
return id;
}
$('#a').click(function(){
var id=ID();
$('#content').append('<div class="d" style="width: 100px;height:100px;"><textarea style="width:100%;height: 100%" id='+id+'></textarea></div>');
myNicEditor.addInstance(id);
jQuery('.d').draggable().resizable();//If i remove this line,it work ok.
});
});
</script>
</head>
<body>
<div>
<button id="a">Add</button>
<div id="myNicEdit" style="width: 200px;" ></div>
<br />
<div id="content">
</div>
Can anyone give some solutions for me!Thank a lot!
</div>
You need to add 'handle' option when you apply draggable, so that it doesn't highjack the onmousedown event on all the child elements.
When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline"></div>
<div class="ui-body ui-body-c">
<div data-role="content">
click to view HTML
<pre>
<span id="HTMLOut">
my HTML output goes here...
</span>
</pre>
</div>
</div>
<div id='groupA' class='preGroups'>
<div id='placeholder' ></div>
</div>
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-b"><button type="submit" class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</fieldset>
<div id='template'>
<div data-role="fieldcontain">
<input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
</div>
</div>
</div>
<style>
#template, #HTMLOut, #XMLOut{
display:none;
}
</style>
<script>
counter = 1;
$(document).ready(function() {
/* Add a listeners to Add Part */
$('.addPart').click(function() {
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
counter++;
myClone.appendTo("#placeholder").trigger( "create" );
// myClone.appendTo("#placeholder").page(); does not work in this version?
return false;
});
// Toggle Show/Hide HTML
$('.preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
</script>
I think the counter is in the wrong place. However this does not make the example any more functional.
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();
counter++;
I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.
AJAX might make it slightly cleaner but here is a start:
$(document).ready(function(){
$("div").live("pageshow", function () {
counter = 0;
$(".addPart").click(function() {
counter++;
$("#placeholder").append('<div id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
$("#template-"+counter).trigger("create");
return false;
});
});
});
</script>
Hey there, total javascript noob here. Just wondering, I've set up some buttons inside ul tags using jquery selectable, which change colour when I click on them. One problem though, how do I make one of them select on the load of the page?
Thanks!
edit: here's my code:
<link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
setLink('single');
$('#target').load($('#single a:first').attr('href'));
});
function setLink(id){
$('#'+id+' a').click(function(e){
$('#target').load(
this.href,
function(){
setLink('target');
}
);
return false;
});
}
</script>
<style type="text/css">
#selectable .ui-selecting {
background-image:url(../images/nav-li-bcg.png);
}
#selectable .ui-selected {
background-image:url(../images/nav-li-bcg.png);
}
</style>
<script>
$(document).ready(function() {
$("#selectable").selectable();
$document.getElementById('current1').click();
});
</script>
</head>
<body>
<div id="tabs">
<div id="navigation">
<div id="single">
<div class="anchor1">
<ul id="selectable">
<li class="current1" id="current1"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li></ul>
</div>
<div class="clear"></div></div></div><!-- navigation -->
<div class="info">
<div class="top"></div>
<div id="target">
</div>
Simulate a click on document ready?
$(document).ready(function() {
$(".selectable .buttonSelector:first").click();
});
$('#myListItem').addClass('ui-selected');
Let's say I have something set to be dragged:
<div class="container">
<div id="draggable-1"></div>
<div id="draggable-3"></div>
<div id="draggable-4"></div>
<div id="draggable-5"></div>
</div>
Is it possible to set jqueryui's draggable api so I can drag multiple draggable elements at the same time?
Thanks.
this is a guess but try
set no style sheet on container so it is set as a group. then do this
$(function() {
$(".container").draggable();
});
then when you drag the entire container drags as a group including all elements inside.
here is a working example of what i did.
<html>
<head>
<style type="text/css">
#draggable-1,#draggable-2,#draggable-3,#draggable-4,#draggable-5 {
width:100px;
height:100px;
background:red;
margin-bottom:10px;
}
.container {
}
</style>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(function() {
$(".container").draggable();
});
</script>
</head>
<body>
<div class="container">
<div id="draggable-1"></div>
<div id="draggable-3"></div>
<div id="draggable-4"></div>
<div id="draggable-5"></div>
</div>
</body>
</html>